angular-strap datepicker updateOn submit

Question

http://plnkr.co/edit/I5JkHiNnwmklHAKh3ag9?p=preview

<form ng-model-options="{ updateOn: 'submit' }">
<input type="text" class="form-control" ng-model="activeEditorData.startDate" data-date-format="yyyy-MM-dd" data-date-type="number" data-min-date="02/10/86" data-max-date="today" data-autoclose="1" name="date2" bs-datepicker>
<button type="button" class="btn btn-default" ng-click="$hide()">Cancel</button>
<button type="submit" class="btn btn-primary" ng-click="$hide()">Save changes</button>
</form>

I am having problems with ng-model-options and the angular-strap datepicker. The actual $scope.date is updated exactly as expected when pressing save, but the datepicker input date does not update as it should when changing dates. Is there some way to force the datepicker to update it's value or something?

If you remove the ng-model-options attribute it works as expected, but that removes the possibility to roll back all the data upon the cancel press, which is problematical for a bigger form.

Answer 1

So certain directives just doesn't seem to like two-way bindings outside the current parent scope, so I simply removed the ng-model-options and made a copy of the object.

Controller:

    /**
     * ng-model-options won't work with certain directives,
     * so this is needed to replicate its behaviour.
     */
    $scope.dataCopy = angular.copy($scope.activeEditorData);

    $scope.save = function(hide) {
        angular.forEach($scope.dataCopy, function(value, key) {
            $scope.activeEditorData[key] = value;
        });
        $scope.exit(hide);
    };

Html:

<form>
    <input type="text" class="form-control" ng-model="dataCopy.startDate" data-date-format="yyyy-MM-dd" data-date-type="number" data-min-date="02/10/86" data-max-date="today" data-autoclose="1" name="date2" bs-datepicker>
    <button type="submit" class="btn btn-primary" ng-click="save($hide)">Save changes</button>
</form>