$watch is not calling inside tabs in angularjs?

Question

Hi All,

In my example, I created two input text boxes, one is outside the tab another one is inside. For both I created a watch function. The outside one is working fine, but the watch function inside the tab is not working. Both places have same type of coding, only I don't know why one is working and the other isn't.

Can anyone help me on this?

 angular.module('components', []). directive('tabs', function() { return { restrict: 'E', transclude: true, scope: {}, controller: [ "$scope", function($scope) { var panes = $scope.panes = []; $scope.select = function(pane) { angular.forEach(panes, function(pane) { pane.selected = false; }); pane.selected = true; } this.addPane = function(pane) { if (panes.length == 0) $scope.select(pane); panes.push(pane); } }], template: '<div class="tabbable">' + '<ul class="nav nav-tabs">' + '<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">'+ '<a href="" ng-click="select(pane)">{{pane.title}}</a>' + '</li>' + '</ul>' + '<div class="tab-content" ng-transclude></div>' + '</div>', replace: true }; }). directive('pane', function() { return { require: '^tabs', restrict: 'E', transclude: true, scope: { title: '@' }, link: function(scope, element, attrs, tabsCtrl) { tabsCtrl.addPane(scope); }, template: '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' + '</div>', replace: true }; }) .controller('sample', function($scope){ $scope.cancel = function(){ console.log("cancel") } $scope.$watch('FirstName', function() { console.log("FirstName") // fetch(); }); $scope.$watch('FirstName1', function() { console.log("FirstName1") // fetch(); }); //Here I need to Change Selected Tab })

 <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script> <!DOCTYPE html> <html> <head> </head> <body ng-app="components" ng-controller="sample"> <h3>BootStrap Tab Component</h3> <form role="form" ng-controller="sample"> <input type="text" ng-model="FirstName1" class="form-control" id="FirstName1"> <tabs> <pane id="FirstTab" title="First Tab"> <div><div class="form-group"> <label for="text">First Name</label> <input type="text" required ng-model="FirstName" class="form-control" id="FirstName"> </div> <div class="form-group"> <label for="text">Middle Name</label> <input type="text" required ng-model="MiddleName" class="form-control" id="MiddleName"> </div> <div class="form-group"> <label for="text">Last Name</label> <input type="text" required ng-model="LastName" class="form-control" id="LastName"> </div> </div> </pane> <pane id="SecondTab" title="Second Tab"> <div> <div class="form-group"> <label for="text">Contact</label> <input type="text" required ng-model="Contact" class="form-control" id="Contact"> </div> <div class="form-group"> <label for="text">Address1</label> <input type="text" required ng-model="Address1" class="form-control" id="Address1"> </div> <div class="form-group"> <label for="text">Address2</label> <input type="text" required ng-model="Address2" class="form-control" id="Address2"> </div> </div> </pane> <pane id="ThirdTab" title="Third Tab"> <div> <div class="form-group"> <label for="text">Phone</label> <input type="text" required ng-model="Phone" class="form-control" id="Phone"> </div> <div class="form-group"> <label for="text">Mobile</label> <input type="text" required ng-model="Mobile" class="form-control" id="Mobile"> </div> <div class="form-group"> <label for="text">Mobile1</label> <input type="text" required ng-model="Mobile1" class="form-control" id="Mobile1"> </div> </div> </pane> <pane id="FourthTab" title="Fourth Tab"> <div>This is the content of the Fourth tab.</div> </pane> </tabs> <button type="submit" ng-click="Submit()" class="btn btn-default">Submit</button> <button type="reset" ng-click="cancel()" class="btn btn-default">Cancel</button> </form> </body> </html>

Answer 1

You should use dot in ng-model. Reference here

So your code will work if same as:

At javascipt file

.controller('sample', function($scope){
    $scope.user = {};
    $scope.cancel = function(){
      console.log("cancel")
    }
    $scope.$watch('user.FirstName', function() {
        console.log("FirstName")
    //  fetch();
    });
    $scope.$watch('FirstName1', function() {
        console.log("FirstName1")
    //  fetch();
    });
      //Here I need to Change Selected Tab
  })

At Html file:

<pane id="FirstTab" title="First Tab">
    <div><div class="form-group">
        <label for="text">First Name</label>
        <input type="text" required ng-model="user.FirstName" class="form-control" id="FirstName">
    </div>
        <div class="form-group">
            <label for="text">Middle Name</label>
            <input type="text" required ng-model="user.MiddleName" class="form-control" id="MiddleName">
        </div>
        <div class="form-group">
            <label for="text">Last Name</label>
            <input type="text" required ng-model="user.LastName" class="form-control" id="LastName">
        </div>

    </div>
</pane>

Answer 2

You can do this in a different way .. using ng-change too .. It watches for any change in the model and calls the function accordingly. Add this instead of the $watch.

 $scope.change = function() {
  console.log("FirstName")
}

In the template call the ng-change as follows

    <input type="text" required ng-model="FirstName" ng-change="change()" class="form-control" id="FirstName">

Here's the link to the edited plunk here

$watch is not calling inside tabs in angularjs?

Question

2 answers

solution1
2 ACCPTED 2016-02-23 07:32:51

solution2
1 2016-02-23 07:42:12

$watch is not calling inside tabs in angularjs?

Question

2 answers

solution1 2 ACCPTED 2016-02-23 07:32:51

solution2 1 2016-02-23 07:42:12

solution1
2 ACCPTED 2016-02-23 07:32:51

solution2
1 2016-02-23 07:42:12