AngularJS UI Modal and select doesn't update the scope values

Question

I am having a lot of trouble trying to save values from the modal component available in Angular UI.

Here is the page controller that calls the modal dialog

        $scope.sourceSchema = [];
        $scope.targetSchema = [];
        $scope.apiDefinition = [];

        $scope.availableSchemas = availableSchemas.get();

        $scope.addComponent = function (type) {

            $scope.$broadcast('addComponent', [type]);

            var templateUrl = "";
            var controller = null;
            var resolve = null;
            var componentSchema = [];

            switch (type) {
                case "sourceSchema":
                    templateUrl = 'source-schema.tpl.html';
                    controller = 'SourceCtrl';
                    componentSchema = $scope.sourceSchema;
                    break;
                case "targetSchema":
                    templateUrl = 'target-schema.tpl.html';
                    controller = 'TargetCtrl';
                    componentSchema = $scope.targetSchema;
                    break;
                case "api":
                    templateUrl = 'api.tpl.html';
                    controller = 'SourceCtrl';
                    componentSchema = $scope.apiDefinition;
                    break;
            }


            var modalInstance = $modal.open({
                templateUrl: templateUrl,
                controller: controller,
                resolve: {
                    existingSchemas: function () {
                        return $scope.availableSchemas;
                    }
                }
            });

            modalInstance.result.then(function (selectedItem) {
                componentSchema.push(selectedItem);
            }, function () {
//                $log.info('Modal dismissed at: ' + new Date());
            });
        };

Here is the SourceCtrl that controls one of the modal dialogs I am using:

.controller("SourceCtrl", function ($scope, $modalInstance, existingSchemas) {
        $scope.existingSchemas = existingSchemas;
        $scope.sourceSchema = "";

        $scope.ok = function () {
            $modalInstance.close($scope.sourceSchema);
        };

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

        $scope.$watch('sourceSchema', function(newValue, oldValue) {
            console.log(newValue, oldValue);
        })
    })

And finally here is the template for this controller (SourceCtrl).

<div class="modal-header">
    <h3>New Source Schema</h3>
</div>
<div class="modal-body">
   <div class="row">
       <div class="col-xs-3">
           <label for="schema-source">Source</label>
       </div>
       <div class="col-xs-9">
           <select name="sourceSchema" ng-model="sourceSchema" ng-options="s as s.name for s in existingSchemas">
                <option value="">-- choose source --</option>
           </select>
       </div>

       <h5>Name: {{sourceSchema.name}}</h5>
   </div>
</div>
<div class="modal-footer">
    <button class="btn btn-primary" ng-click="ok()">OK</button>
    <button class="btn btn-warning" ng-click="cancel()">Cancel</button>
</div>

The funny thing is that when I change the value in the select, the {{sourceSchema.name}} line does show the correct name of the schema, however the changes do not get reflected in the controller and the actual value is not being passed on. I have used a watch to detect when something gets changed and apparently it doesn't. But the value does get changed otherwise why would it get displayed when I select it in the dropdown list.

Answer 1

Make sure that you've got a dot in your ngModel expression - that is - that you are binding to an object property and not directly to the scope. Something like:

.controller("SourceCtrl", function ($scope, $modalInstance, existingSchemas) {
    $scope.existingSchemas = existingSchemas;
    $scope.source = {
      schema: ''
    };

    $scope.ok = function () {
        $modalInstance.close($scope.source.schema);
    };

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

    $scope.$watch('source.schema', function(newValue, oldValue) {
        console.log(newValue, oldValue);
    })
})

And then, in your markup:

 <select name="sourceSchema" ng-model="source.schema" ng-options="s as s.name for s in existingSchemas">
            <option value="">-- choose source --</option>
       </select>

If you can provide a plunker I can help you fixing the code.