Having just started delving into Angular, I've encountered an issue while creating an application where a single AngularJS bind fails to update when the value of the bound object changes.
This is a simplified version of the app, hence its structure. Below is the HTML code:
<div ng-app="userLogin">
<div ng-controller="loginCtrl">{{currentUser.name}}</div>
</div>
The intended behavior is for currentUser.name to be updated when a value is assigned to that key. The following is the Angular script responsible for updating the value:
'use strict';
angular.module("userLogin", [
'userLogin.controllers',
]);
angular.module('userLogin.controllers', []).controller('loginCtrl', ['$scope', function(
$scope
){
$scope.users = [
{
name: 'Fred Jones',
username: 'fred.jones',
}];
var currentUser = {};
$scope.myFunction = function(){
currentUser = $scope.users[0];
console.log(currentUser.name);
};
$scope.myFunction();
}]);
As you can see, there is a small array object named 'users' (currently containing only one item). Next, I define the currentUser variable that is being bound in the HTML. Then, a simple function is executed which sets currentUser.name to 'Fred Jones'.
However, upon running the script, the page appears blank. Even though the console displays the correct updated value for currentUser.name, the HTML binding does not show Fred Jones as expected.
What could possibly be wrong with my approach here?
For a demonstration, refer to this codepen link: http://codepen.io/anon/pen/JoVBaE