No data binding while using bootstrap modal in angularjs

Question

I am using mongodb, express, angularjs and nodejs to develop a simple application. However i face a problem that when I edit a record using bootstrap modal, the data is not binding with the data in ng-repeat.

Below is my code

entryController.js

function entryController($scope, $modal, entryFactory) {


// Get All Entry
entryFactory.getEntries().success(function(data) {
  $scope.entries = data;
});


// View Entry Detail
$scope.editEntry = function(id){
  var id = id._id;

  var modalInstance = $modal.open({
    templateUrl: 'editEntryModal',
    controller: editEntryModalController,
    resolve: {
        entry: function(){
            return entryFactory.getEntry(id);
        }
    }
  });
};

};

var editEntryModalController = function($scope, $modalInstance, $window, data, entryFactory)  {
$scope.entry = {};


$scope.entry = data.data.entry;
$scope.entry.name = data.data.entry.name;


$scope.editEntry = function(){
    entryFactory.updateEntry(data.data.entry._id, $scope.entry).success(function(){

        $modalInstance.close();
    });
};

$scope.cancel = function(){
    $modalInstance.dismiss('cancel');
}
};

Below this is my html code (entry.html)

<div class="container-fluid">
  <div class="row">

    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">


        <button type="button" class="btn btn-default btn-lg" ng-click="addEntry()"><span class="glyphicon glyphicon-plus"></span></button>


        <div class="col-sm- col-xs-12 col-lg-3">
        <form class="form-search">
              <div class="input-group">
                  <input type="text" class="form-control " placeholder="Search..." ng-model="query">
                  <span class="input-group-btn">
                      <button type="submit" class="btn btn-search">Search</button>
                  </span>
              </div>
          </form>
        </div>

        <br />
        <br />

        <div class="panel panel-default">
            <div class="panel-heading">
                <h4>List Entry</h4>
            </div>

            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Name</th>
                        <th>Email</th>
                        <th>Country</th>
                        <th>Comment</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="entry in entries | filter: query">
                        <td>{{$index+1}}</td>
                        <td>{{entry.name}}</td>
                        <td>{{entry.email}}</td>
                        <td>{{entry.country}}</td>
                        <td>{{entry.comment}}</td>
                        <td>
                            <button type="button" class="btn btn-default btn-lg" ng-click="viewEntry(entry)"><span class="glyphicon glyphicon-eye-open"></span></button>
                            <button type="button" class="btn btn-default btn-lg" ng-click="editEntry(entry)"><span class="glyphicon glyphicon-edit"></span></button>
                            <button type="button" class="btn btn-default btn-lg" ng-click="deleteEntry(entry)"><span class="glyphicon glyphicon-trash"></span></button>
                        </td>
                    </tr>
                </tbody>
            </table>

        </div>

    </div>

  </div>
</div>


<!-- Edit Entry Modal -->
<script type="text/ng-template" id="editEntryModal" />
<div modal="entryEdit">
<div class="modal-header">
    <h3>Edit - {{ entry.name }}</h3>
</div>
<div class="modal-body">
  <form role="form" class="form-horizontal" ng-model="addForm">
  <div class="form-group">
    <label for="inputName" class="col-sm-2 control-label">Name</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" id="inputName" ng-model="entry.name" name="name" placeholder="Name">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="inputEmail">E-mail</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" id="inputEmail" ng-model="entry.email" name="email" placeholder="E-mail">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="inputCountry">Country</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" id="inputCountry" ng-model="entry.country" name="country" placeholder="Country">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-2" for="inputComment">Comment</label>
    <div class="col-sm-6">
      <input type="text" class="form-control" id="inputComment" ng-model="entry.comment" name="comment" placeholder="Your Comment">
    </div>
  </div>
  </form>
  </div>
  <div class="modal-footer">
    <button ng-click="editEntry()" class="btn btn-info"><i class="icon-plus icon-white"></i>Save</button>
    <button class="btn btn-warning cancel" ng-click="cancel()">Cancel</button>
  </div>
  </div>
</div>
</script>

Below is the print screen of the problem.

http://imageshack.com/a/img534/3024/h5cy.png

Answer 1

You are retrieving a different object when you do

return entryFactory.getEntry(id);

and bind to modal.

Whereas your list is binding to a collection which has different reference

entryFactory.getEntries().success(function(data) {
  $scope.entries = data;
})

The option here is to refetch the entities when update is done by calling getEntries after $modalInstance.close();

Second is to get the object updated and add it to the collection replacing the old one.