Use ng-click on md-tab label

Question

I am having problems with md-tabs : I cannot call the controller function whenever I click on a specific tab to display.

Here are some codes I tried:

 <md-tabs md-center-tabs id="menuTabs" md-dynamic-height="true" ng-click="focusSearch()"> <md-tab label="<i class='fa fa-search'></i>" ng-if="handleResize()"> <md-content class="control-sidebar-dark" ng-style="{'height' : menuHeight}"> 

and

 <md-tabs md-center-tabs id="menuTabs" md-dynamic-height="true"> <md-tab label="<i class='fa fa-search' ng-click='focusSearch()'></i>" ng-if="handleResize()"> <md-content class="control-sidebar-dark" ng-style="{'height' : menuHeight}"> 

and

 <md-tabs md-center-tabs id="menuTabs" md-dynamic-height="true"> <md-tab ng-click="focusSearch()" label="<i class='fa fa-search'></i>" ng-if="handleResize()"> <md-content class="control-sidebar-dark" ng-style="{'height' : menuHeight}"> 

I want my focusSearch() function to focusSearch() called when I click on this tab, but it never was.

Answer 1

Try using these built-in md-tab attributes

• md-on-select
• md-on-deselect

 var app = angular.module('myapp', ['ngMaterial']); app.controller('main', function($scope) { $scope.myClickEvent1 = function() { alert('one selected'); } $scope.myClickEvent2 = function() { alert('two selected'); } }); 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.0/angular-material.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-aria.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular-animate.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.11.0/angular-material.min.js"></script> <div ng-app="myapp" ng-controller="main"> <md-tabs> <md-tab md-on-select="myClickEvent1()">One</md-tab> <md-tab md-on-select="myClickEvent2()">Two</md-tab> </md-tabs> </div> 

Note. . This event is slightly different from ng-click, because if the tab is already selected and then clicked, the event will not fire.

Source: https://material.angularjs.org/latest/#/api/material.components.tabs/directive/mdTab

Answer 2

As the Creator suggested, I used the directive instead of ng-click :

http://codepen.io/anon/pen/oXJPvx