How to assign models to $scope in AngularJS

Question

According to best practices I read about, in my controller, I assign a model to the $scope rather than assignging multiple separate values to $scope:

  .controller('TestCtrl', function AboutCtrl($scope, $http) {

    var model = {
        name: 'Bob',
        address: 'Squaresville'
        }
    };

    $scope = model;
})

And in my template:

<input type="text" ng-model="model.name" /> {{model.name}}
<input type="text" ng-model="model.address" /> {{model.address}}

But when the page initially loads, the text boxes have no value. But as I type, the matching {{...}} tags get updated.

Why doesn't the initial value get updated?

you are setting your $scope to model ($scope=model). You should be doing $scope.model = model; — Lee Willis
– Lee Willis, Commented Jun 30, 2014 at 14:25

Mathew Berg · Accepted Answer · 2014-06-30 14:22:09Z

5

Do this instead:

$scope.model = model;

Or just define it that way:

$scope.model = {
    name: "Bob",
    address: "squaresville"
}

answered Jun 30, 2014 at 14:22

Mathew Berg

28.8k11 gold badges72 silver badges94 bronze badges

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

3 Comments

Cabbagesocks Over a year ago

Woo!, thanks. But do you know why my way did what it did (allow updates but not initial values?)

Mathew Berg Over a year ago

You crushed the $scope variable, shouldn't be doing that :)

Brocco Over a year ago

@Cabbagesocks Just remember when referring to this value in your markup to include model so... <input ng-model="model.name"> and not <input ng-model="name">

MBielski · Accepted Answer · 2014-06-30 14:23:27Z

2

There is a shorter way to do what you want:

$scope.model = {
        name: 'Bob',
        address: 'Squaresville'
        };

answered Jun 30, 2014 at 14:23

MBielski

6,6103 gold badges36 silver badges46 bronze badges

Collectives™ on Stack Overflow

How to assign models to $scope in AngularJS

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related