$save().then()

Template file(.html)
<html ng-app=""><head>
<title></title></head>
<body>
....
....
....
...
<button class= "btn btn-primary" ng-click = "saveUpdate()">
</body>
</html>
<!-- ==========X ============= -->
js file's content

angular.module('modal-controller', ['ui.bootstrap.modal'])

.factory('ModalController', ['$modal', function($modal) {

    var service = {

        model: undefined,
        original: undefined,

        saveButtonTitle: undefined,
        revertButtonTitle: undefined,

        modalInstance: undefined,

        init: function(model, createMode, $modalInstance) {
            service.model = model;
            service.original = angular.copy(service.model);

            service.saveButtonTitle = createMode ? 'Create' : 'Save';
            service.revertButtonTitle = createMode ? 'Clear' : 'Revert';

            service.modalInstance = $modalInstance;
            return this;
        },

        saveUpdate: function () {
            service.model.$save().then(function() {
                service.modalInstance.close(service.model);
            });
        },

        cancel: function () {
            service.modalInstance.dismiss('cancel');
        },

But when clicking on the save button in the template the action is taking place.