Angularjs $scope not updating UI

Question

I am new to AngularJS and I'm messing around trying to see what I can do. I have a simple form:

<div ng-controller="EditContactCtrl">
  <div class="row-fluid" ng-repeat="email in contact.emails">
    {{email.type}} - {{email.email_address}}
  </div>
  <form name="emailForm" ng-controller="EditContactCtrl" ng-submit="addEmail()">
   <select class="span4" name="type">
     <option vlaue="Work">Work</option>
     <option vlaue="Personal">Personal</option>
     <option vlaue="Other">Other</option>
   </select>
   <input class="span6" type="text" name="email_address" placeholder="Email Address">
   <input type="submit" class="btn span2 pull-right" value="Add"/>
  </form>
</div>

In the controller I have a simple action to push the new email address on the contact object e.g.

function EditContactCtrl($scope, Contacts, $routeParams){
  $scope.contact = {emails:[], contact_numbers: [], addresses: []};
  $scope.isNew = $routeParams.contactId == '';

  if(!$scope.isNew){
    $scope.contact = Contacts.get({contactId: $routeParams.contactId});
  }

  $scope.addEmail = function(){
    $scope.contact.emails.push({type:emailForm.type.value, email_address: emailForm.email_address.value});
    console.log($scope.contact.emails);
    emailForm.reset();
  }
}

When I run this code it all goes through fine and I can see the new email address getting added to the list of emails in the contact object. But the problem is that that UI is not getting updated with the new email address. I am expecting it to spit out the new address above it where I have ng-repeat="email in contact.emails"

wrap the entire code in a div and add the controller to that div — ashley
– ashley, Commented Dec 14, 2012 at 10:18
ashely... this is already the case. Sorry i maybe should of give more of a snippet! The code is wrapped in <div ng-controller="EditContactCtrl"> — NimmoNet
– NimmoNet, Commented Dec 14, 2012 at 10:20
ok but you also have it on the form itself, which means you've declared it twice. it may be interfering with the one above — ashley
– ashley, Commented Dec 14, 2012 at 10:22
You legend. I was about to kill something over that. Thanks, again — NimmoNet
– NimmoNet, Commented Dec 14, 2012 at 10:25
@ashley, can you please post your comment as an answer so that this question no longer appears on the AngularJS "unanswered" list? — Mark Rajcok
– Mark Rajcok, Commented Dec 30, 2012 at 4:26

Jay · Accepted Answer · 2012-12-30 22:21:22Z

4

It looks like you have declared the same controller "EditContactCtrl" within itself. It may be this nesting issue that is causing your problem. Try removing the ng-controller on your <form> and see if this fixes your problem.

edited Dec 30, 2012 at 22:21

Jay

20k11 gold badges56 silver badges72 bronze badges

answered Dec 30, 2012 at 20:43

ashley

2,7675 gold badges28 silver badges39 bronze badges

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

2 Comments

guiomie Over a year ago

can you defined an ng-controller twice in the same <body> assuming they wont be nested ? If yes, will a ng-click from the first ng-controller update a $scope in the second ?

Cowman Over a year ago

This answer has just solved an issue I was having with controller as, where my model was updating but not being reflected in the view. It turns out I had the controller defined in the directive that I forgot about, and also put the controller as in the html. What a mistake. Hours of wasted time, but thanks to this answer I have finally found the cause. To fix it I removed the html declarion of controller and just did everything in the directive, with controller: and controllerAs:

Collectives™ on Stack Overflow

Angularjs $scope not updating UI

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related