CODEWITHSUNDEEP
javascriptangularjs
NimmoNet
NimmoNet

Reputation: 994

Angularjs $scope not updating UI

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"

Upvotes: 1

Views: 1395

Answers (1)

ashley
ashley

Reputation: 2767

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.

Upvotes: 4

Related Questions