javascript - Controller functions not being called from ng-click link in Angular -

i'm using angular bootstrap calendar custom cell template , cell modifier. in controller, i"m building bunch of tables inside each day cell. of cells have link that, when clicked on, should run function in controller add or delete record on end , change content of cell.

here's ui-router definition:

  $stateprovider     .state('home', {       url: '/',       templateurl: 'views/home.html',     })     .state ('calendar', {       url : '/calendar',       templateurl: 'views/calendar/index.html',       controller: 'calendarcontroller',       controlleras: 'vm'     }); 

here's relevant controller code:

(function() {   angular.module('formioappbasic')     .controller('calendarcontroller', function($scope, moment, calendarconfig, $http, formio, shiftservice, appconfig, $q) {      var vm = this;      calendarconfig.templates.calendarmonthcell = 'views/calendar/daytemplate.html';     calendarconfig.dateformatter = 'moment';      vm.events = [];     vm.calendarview = 'month';     vm.viewdate = moment().startof('month').todate();     vm.appconfig = appconfig;     vm.currentuser = formio.getuser();     // station config.     var stationpromise = shiftservice.getstationconfig().then(function(data) {       vm.configslots = data;     });      var onshifts = function(data) {       vm.events = data;     };      var onerror = function(error) {       vm.error = 'there error.';     };      vm.addname = function(userid) {       // code add name end.      };      vm.removename = function(userid) {       // code remove name end.     };      -- rest of controller code goes here      $scope.$on('$destroy', function() {       calendarconfig.templates.calendarmonthcell = 'mwl/calendarmonthcell.html';     });   }); })(); 

and here's custom template calendar cell.

<div class="cal-month-day">      <span       class="pull-right"       data-cal-date       ng-click="calendarctrl.dateclicked(day.date)"       ng-bind="day.label">     </span>    <div ng-if="day.todayhasshifts">{{ day.text }}</div>        <table ng-class="{ today: day.istoday }" class="table table-bordered table-condensed">           <thead>             <tr>               <td>station</td>               <td>position</td>               <td>name</td>             </tr>           </thead>             <tbody ng-repeat="shift in day.shifttables">               <tr ng-repeat="slot in shift.slots">                 <td align="top" ng-attr-rowspan>{{ shift.station }}</td>                 <td>{{ slot.position }}</td>                 <td ng-if="slot.nameoption == 'printnameremove'" class="print-name-remove"><a href="" ng-click="vm.removename(slot.name)">{{ slot.name }}</a></td>                 <td ng-if="slot.nameoption == 'printname'" class="print-name">{{ slot.name }}</td>                 <td ng-if="slot.nameoption == 'printsignuplink'" class="print-signup-link"><a href="" ng-click="vm.addname(slot.name)">sign up</a></td>                 <td ng-if="slot.nameoption == 'printblank'" class="print-blank"></td>               </tr>               <tr>                 <td colspan="3">               </td>             </tr>           </tbody>       </table> 

the problem i'm having clicking on link not triggering addname , removename functions in controller. i'm sure must missing obvious, i'm not seeing is. need change?

thanks.