angular-ui bootstrap tab select function on click

Question

Am trying to call an expression function on tab select using angular ui bootstrap, however the expression is not being called but checking on angular inspector the function /expression exists : below is my code work:

NB : Other tabs function correctly

Angular View

<uib-tab ng-click="vm.alertMe" select="" heading="New Invoice">
                          .....
 </uib-tab>

controller used as vm

vm.alertMe = alertMe;

 function alertMe() {
            setTimeout(function() {
              $window.alert('You\'ve selected the alert tab!');
            });
          } 

Answer 1

You're not calling the function in your DOM.

instead of this:

<uib-tab ng-click="vm.alertMe" select="" heading="New Invoice">

you should be calling it like this:

<uib-tab ng-click="vm.alertMe()" select="" heading="New Invoice">

Answer 2

Why not define the alertMe function directly on the vm. I can not see your whole code. I assume it should work if you vm is correctly assigned as this in the controller. Also make sure in the html, your controller is correctly defined. Let me know :)

vm.alertMe = function() {
              setTimeout(function() {
               $window.alert('You\'ve selected the alert tab!');
              });
             } 

Answer 3

Always inject the base service names you use in your angular app ,in the above example i was not calling : $window service which resulted in the bug / error .my final controller is as following :

function() {

    'use strict';

    angular
        .module('app.patients')
        .controller('PatientsController', PatientsController);

    PatientsController.$inject = ['$http','$window'];
    /* @nginject */
    function PatientsController($http, $window) { 
       vm.alertMe = function() {

             $window.alert('You\'ve selected the alert tab!');
           }
     }
}

and the view ,

<uib-tab  select="vm.alertMe()" heading="New Invoice">
                          .....
 </uib-tab>