Angular Model Isn't Updated When Input Is Changed

Question

I'm using Angular UI bootstrap to create a modal

I have this template

<div class="modal-body">
Topic <input type="text" ng-model="topic" />
<div id="topic-error" class="field-validation-error" ng-show="error" ng-bind="error">

</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()" ng-disabled="!topic">OK</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>
</div>

Then this is the modal controller

app.controller('AddTopicCtrl', ['$scope', '$modalInstance','$http',
 function ($scope, $modalInstance,$http) {

     $scope.topic = 'initial';
     $scope.error = "";
     $scope.ok = function () {

         $http.post("/api/topics/post", { name: $scope.topic })
             .success(function(result) {
                 if (result.Status == "Ok") {

                     $modalInstance.close(result.Data.Topic);
                 } else {
                     $scope.error = result.Data.Message;
                 }

         });

     };

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

 }
]);

The problem is that $scope.topic doesn't update when I enter a value in the textbox. It shows the inital value from the model but it acts only as one-way binding (model -> view). Everything else works properly.

Is there something I forgot or is there a limitation of the ng-model directive?

Answer 1

AngularUI Bootstrap $modal service is creating a transclusion scope for its modal windows. It means that there is one more scope between your controller and your template. This is why you need to use the "famous dot" in the ng-model expression, ex.:

In the controller:

$scope.topic = {value: 'initial'};

and in the template:

<input type="text" ng-model="topic.value" />