AngularJS not updating?

Question

I'm not sure why this is not changing when its bound object changes:

My HTML:

 <div id="account-info" ng-controller="AuthenticateCtrl">
     <h5>Account: </h5>
     {{account}}
 </div>
 <div ng-controller="AuthenticateCtrl">
    <div modal="shouldBeOpen" options="opts">
        <div class="modal-header">
            <h3>Select your account</h3>
        </div>
        <div class="modal-body">
            <div class="account-btn" ng-repeat="item in items" ng-click="close(item)">
                {{item}}
            </div>
        </div>
    </div>
</div>

My JavaScript:

var AuthenticateCtrl = function ($scope) {
    $scope.account= "";

    $scope.open = function() {
        $scope.shouldBeOpen = true;
    };

    $scope.close = function(item) {
        if (item) {
            $scope.shouldBeOpen = false;
            $scope.account= item;
        }
    };
}

For some reason it always displays nothing, or if I set $scope.account = "ANY STRING" it will display "ANY STRING" but won't update when the close function is called.

You don't show where close is called or what item is. Also you should probably follow the best practice of using a model that always has a . in the references from the HTML. — shaunhusain
– shaunhusain, Commented Jul 15, 2013 at 16:11

marko · Accepted Answer · 2013-07-15 16:25:51Z

3

Ok an attempt with fiddle. Firstly you had two ng-controller directives pointing to the same function. Secondly I don't really understand the domain here, but I'm guessing this is what you need. Heres a fiddle.

<div ng-controller="AuthenticateCtrl">
<div id="account-info">
     <h5>Account: </h5>
     {{account.name}}
 </div>
 <div>
    <div modal="shouldBeOpen" options="opts">
        <div class="modal-header">
            <h3>Select your account</h3>
        </div>
        <div class="modal-body">
            <div class="account-btn" ng-repeat="item in items" ng-click="close(item)">
                {{item.name}}
            </div>
        </div>
    </div>
</div>   
</div>

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

var AuthenticateCtrl = function ($scope) {

    $scope.opts = {};
    $scope.account = {};

    $scope.items = [
        {'name':'one'},
        {'name':'two'}
    ];

    $scope.open = function() {
        $scope.shouldBeOpen = true;
    };

    $scope.close = function(item) {
        if (item) {
            $scope.shouldBeOpen = false;
            $scope.account= item;
        }
    };
}
</script>

answered Jul 15, 2013 at 16:25

marko

2,8211 gold badge33 silver badges37 bronze badges

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

1 Comment

Alex Over a year ago

It was having the two seperate divs pointing to the same controller, once I seperated them out my code worked as was. Thanks! (Also my modal works independent of doc placement.. I should have combined them from the start, thanks for the kick in the right direction haha)

Collectives™ on Stack Overflow

AngularJS not updating?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related