Angularjs $scope variables not updating in view

Question

I'm new to Angularjs and im trying to update two $scope variables in two seperate functions which are called on ng-click.

Even though the variables update, they wont rebind in the view.

HTML

<div ng-app="">
<div ng-controller="MainCtrl">
     <p> <a href="#" ng-click="getDetails();getElse()">Refresh</a> </p>
    <p ng-controller="MainCtrl"><span ng-bind="something"></span></p>
       <p ng-controller="MainCtrl"><span ng-bind="somethingelse"></span></p>
</div>
</div>

JS function MainCtrl($scope) {

$scope.something = "something";
$scope.somethingelse = "else";

$scope.getDetails = function () {
     alert("getdetails before change: "+$scope.something);
    $scope.something = 'changed';
    alert("getdetails: "+$scope.something);
};

$scope.getElse = function () {
    alert("getElse before change: "+$scope.somethingelse);
    $scope.somethingelse = 'changed';
    alert("getElse: "+$scope.somethingelse);
    };

}

I've created a fiddle to show you what i mean: http://jsfiddle.net/M3pZ8/

can anyone tell me what is the correct way to do this?

Thanks in advance.

tymeJV · Accepted Answer · 2014-03-28 16:08:57Z

12

It's because you have MainCtrl declared 3 times, effectively creating 3 separate scopes. You only need it once, at the top.

<div ng-controller="MainCtrl">
    <p> <a href="#" ng-click="getDetails();getElse()">Refresh</a> </p>
    <p><span ng-bind="something"></span></p>
    <p><span ng-bind="somethingelse"></span></p>
</div>

answered Mar 28, 2014 at 16:08

tymeJV

105k14 gold badges165 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

XML Over a year ago

Each use of ng-controller creates a new instance of the controller. So, if you visit the same route three different times, you're going to have three different instances of the controller. This is a key distinction with a Service, which is persistent so that you get the same instance each time you inject it, throughout the application life-cycle.

Anoop · Accepted Answer · 2014-03-28 16:11:46Z

0

Updated your jsfiddle

 don't need to add same controller multiple times.

answered Mar 28, 2014 at 16:11

Anoop

23.2k10 gold badges65 silver badges79 bronze badges

Collectives™ on Stack Overflow

Angularjs $scope variables not updating in view

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related