Redefined Variable Doesn't Bind in AngularJS

Question

I'm new to Angular, and I've run into a bug in creating an app where a single AngularJS bind doesn't update when the bound object value changes.

It's a scaled down version of the app, so that's why it's structured like it is. Here's the HTML:

<div ng-app="userLogin">
  <div ng-controller="loginCtrl">{{currentUser.name}}</div>
</div>

currentUser.name is supposed to update when a value is applied to that key. Here's the Angular script that's suppose to update 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();
    }]);

So you see I have a small array object called 'users' (which currently only has one item in it). Then, I defined the currentUser variable I have bound in the HTML. Then, a simple function runs that defines currentUser.name to be equal to 'Fred Jones'.

However, when the script is run, the page is blank. The console spits out the correct updated value for currentUser.name, but the HTML binding doesn't show Fred Jones as it should.

What am I doing wrong here?

Here's a codepen demonstration: http://codepen.io/anon/pen/JoVBaE

Answer 1

currentUser is not in the scope. It has to be $scope.currentUser =.