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

angular-ui, angular-ui-bootstrap, angularjs, angularjs-directive, angularjs-scope

Solution

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.

Problem

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.

Original source