angular js - scope variable dont change on 2 way data binding

Question

I am new with angular js.

my controller is : var myapp= angular.module('myapp', ['ngRoute']);

// configure our routes
myapp.config(function($routeProvider) {
    $routeProvider

        // route for the home page
        .when('/', {
            templateUrl : 'pages/person.html',
            controller  : 'personController'
        })

        // route for the contact page
        .when('/add', {
            templateUrl : 'pages/addGroup.html',
            controller  : 'groupController'
        });
});
myapp.controller('groupController', function($scope) {
        $scope.user = 'alex';
        $scope.print = function() 
        {
            alert($scope.user);
        };
    });

my view is :

<div ng-controller="groupController">
  Your name: <input type="text" ng-model="user">
    <button ng-click='print()'>Print</button>
  {{user}}
</div>

when I change the input value to "mila" for example its reflect in the view, but when I click the print button I am still getting alert with "alex" name.

how can I make the scope.user to change also ? I cant understand what is missing here for 2 way data binding. thanks !

It is working for me. Have a look at - http://plnkr.co/edit/7itpNdFR6LQRg2uHJFrr?p=preview — Nikhil Aggarwal, Jun 26 '15 at 10:59
it is working fine me also - https://jsfiddle.net/yhv9bjrx/1/ — Sudharsan S, Jun 26 '15 at 10:59
@mashiah - Sounds like you didn't understand 2 way data binding clearly — Sudharsan S, Jun 26 '15 at 11:00
maybe Its not working for me because I am using routing also ? I edit my question with my full model. thanks — mashiah, Jun 26 '15 at 11:06
You have double declaration of controller. Once via `ng-controller="groupController"` and then again via `$routeProvider` Then most likely the controller is initialized twice — David Votrubec, Jun 26 '15 at 11:16
I delete the "ng-controller="groupController" from the div, and its still not working for me. i think that something in thr routing is ruining this. — mashiah, Jun 26 '15 at 11:22

score 1 · Answer 1 · answered Jun 27 '15 at 10:27

This works. So i think there is something wrong with the routing or there is something that breaks the binding.

Here is your own example without the routning:

var myApp = angular.module('myApp', []);


myApp.controller("myController", function($scope) {

  $scope.user = 'alex';
  $scope.print = function() {
    alert($scope.user);
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
  Your name:
  <input type="text" ng-model="user">
  <button ng-click='print()'>Print</button>
  {{user}}
</div>

There are two possible solutions and the rigth one depends on what is causing the problem.

Solution no 1 - pass the user to the print function:

var myApp = angular.module('myApp', []);


myApp.controller("myController", function($scope) {

  $scope.user = 'alex';
  $scope.print = function(user) {
    alert(user);
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
  Your name:
  <input type="text" ng-model="user">
  <button ng-click='print(user)'>Print</button>
  {{user}}
</div>

Solution no 2 - use a comlpex object: (also check this and this out.)

var myApp = angular.module('myApp', []);


myApp.controller("myController", function($scope) {

  $scope.user = {
    name: 'alex'
  };
  $scope.print = function() {
    alert($scope.user.name);
  };

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
  Your name:
  <input type="text" ng-model="user.name">
  <button ng-click='print()'>Print</button>
  {{user.name}}
</div>

score 1 · Accepted Answer · answered Jun 27 '15 at 10:48

1

Three things,

Check if you have <div ng-view=""></div> in you index.html or which ever your source page is. This is where your different views, i.e., the views (person.html , addGroup.html) stated under routing would get injected.
Remove the declaration of ng-controller="groupController" from addGroup.html
Double check if the URLs you have provided under routing are correct.
Which version of angular are you using? Check if the version that you are using requires angular-route.js. If so please include this js.

Check if you score all positives on above mentioned bullets!

answered Jun 27 '15 at 10:48

Sudhansu Choudhary

3,322
3
19
30

thanks its works now. one more question - why do I need to remove the ng-controller="groupController" from the addGroup.html ? – mashiah Jun 27 '15 at 12:50
that's because you have already assigned the controller for `addGroup.html` to be `groupController` while declaring the routes here as, `$routeProvider..when('/add', { templateUrl : 'pages/addGroup.html', controller : 'groupController' });` .You dont need to assign the controller again in your html, so you shouldn't do a `ng-controller="groupController"`. Also, please accept the answer by checking the "tick" mark near the answer if you think it solved your issue :) Cheers! – Sudhansu Choudhary Jun 27 '15 at 13:17

angular js - scope variable dont change on 2 way data binding

2 Answers2