CODEWITHSUNDEEP
javascripthtmlangularjs
Alex
Alex

Reputation: 2405

AngularJS not updating?

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.

Upvotes: 0

Views: 169

Answers (1)

marko
marko

Reputation: 2831

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>

Upvotes: 3

Related Questions