AngularJS - $scope doesn't update when modal opens

Question

I am very new to AngularJS. I have simple form -

<div ng-controller="editProfileController" class="modal" id="editprofile" modal="editprofile">
  <form method="post" action="" id="cropimage" name="editfrm"  enctype="multipart/form-data" >
    <div class="form-group">
      <div class="input-group">
        <span class="input-group-addon theme-label input-social" id="basic-addon1">Display Name</span>
        <input type="text" class="form-control theme-text custom-url" ng-model="editprofile.displayname" name="displayname" id="displayname" required="" />    =====@{{editprofile.displayname}}
      </div>
      <span class="error" ng-show="submitted && editfrm.displayname.$error.required">This is required field</span>
    </div>
  </form>
</div>
<a href="#" ng-controller="editProfileController" ng-click="getprofileinfo()" class="editbtn link" data-toggle="modal"  >
  <span>Edit Profile</span>
</a>

Edit Profile link will call function getprofileinfo() from controller. Here is my controller:

mainApp.controller("editProfileController", function($scope,$rootScope, $http) {
  $scope.getprofileinfo = function(editprofile) {

    $http({
      url: "profile/geteditdata",
      method: 'GET',
      headers : {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}
     }).success(function(data) {

       $scope.editprofile = {};
       $scope.editprofile.displayname  = "test";  // data.displayname                
       $rootScope.editprofile = true;

     }).error(function(err) {
       "ERR", console.log(err)})
    }

In the controller, $rootScope.editprofile = true; open modal box, but the value I am assigning to editprofile.displayname is not getting updated. I tried with assigning value from rootScope as well, like $rootScope.editprofile.displayname = "test"; but result is same. Display name textbox appears as blank in modal window. Is I am missing something here?

Please, add live example (jsfiddle). By first, you have `ng-controller="editProfileController"` twice in you html — Alexander Anikeev, Sep 28 '16 at 11:08

score 0 · Answer 1 · answered Sep 28 '16 at 12:08

You should use $timeout while updating values , i think apply cycle might not be running.

do something like this

 }).success(function(data) {

   $timeout(function(){
       $scope.editprofile = {};
      $scope.editprofile.displayname  = "test";  // data.displayname                
      $rootScope.editprofile = true;
     })

 }).

AngularJS - $scope doesn't update when modal opens

1 Answers1