Question

This is my markup

    <div id="username" ng-controller="quickUserAdd">
    <h1>User</h1>
    <input placeholder="your full name" ng-model="fullname">
    <div ng-show="fullname">
        <div>
            <span class="big">Username</span>
            <span class="small">{{username()}}</span>
        </div>
        <div class="password-{{passwordStatus()}}">
            <input type="password" ng-model="password" placeholder="Password"/>
            <span class="small">{{passwordStatus()}}</span>
        </div>
    </div>
</div>

And my controller:

    var passwordStrengths = ["weak", "medium", "ok", "great"];
    function quickUserAdd($scope)
    {
        $scope.password = "";
        $scope.fullname = "";
                   ....
    }

How do I bind $scope.fullname, $scope.username and $scope.password to installation.user[0] (where installation is a global object), so that on any change of fullname, username or password, they’re updated in installation.user[0] (also an object)?

Answer 1

I’m sure that you are well aware of problems with global variables so I assume here that you don’t have other choice and in your use-case you need to access a globally defined JavaScript object.

Probably the easiest way forward in your case is to expose the installation.user[0] on a scope in your controller like so:

function quickUserAdd($scope) {
   $scope.user = installation.user[0];
   ....
}

and then bind to properties of the user object like this:

<input placeholder="your full name" ng-model="user.fullname">
<input type="password" ng-model="user.password" placeholder="Password">

This way any changes in an input box should be imediatelly propagated to the global variable.

Please note that if you would like to change the global variable outside of the AngularJS world and have the UI still updated you will have to wrap this change into the Scope.$apply() method.

If I could suggest one more thing: usually people tend to name AngularJS controllers starting with an uppercase and add the Ctrl suffix so your controller could be named like QuickUserAddCtrl;