createCtrl.js

'use strict';

var CreateCtrl = function(List) {
  this.List = List;
  this.list = new List();
};

angular.extend(CreateCtrl.prototype, {

  create: function(list, lists) {
    var promise = list.$create();

    promise.then(angular.bind(this, function(list) {
      lists.push(list);
      this.list = new this.List();
    }));

    // promise will be intercepted and handled by `mySubmit` directive
    return promise;
  }

});

angular.module('myApp')
  .controller('CreateCtrl', CreateCtrl);

form.html

<form name="listForm" novalidate="true" class="form-inline"
      my-submit="formCtrl.create(formCtrl.list, listsCtrl.lists)">
  <fieldset ng-disabled="listForm.$saving">
    <div class="form-group" ng-class="{ 'has-error': listForm.name.$invalid && listForm.$submitted }">
      <input type="text" name="name" class="form-control input-sm"
             placeholder="Enter list name" autocomplete="off"
             ng-model="formCtrl.list.name" ng-required="true" />
  
      <button type="submit" class="btn btn-sm btn-success">Ok</button>
      <a class="btn btn-sm btn-default" ng-show="formCtrl.list.isPersisted()" ng-click="formCtrl.cancel()">Cancel</a>
  
      <p class="help-block" ng-show="listForm.name.$error.required && listForm.$submitted">
        Please enter the name.
      </p>
  
      <p class="help-block" ng-show="listForm.name.$error.server">
        {{listForm.$serverErrors.name}}
      </p>
    </div>
  </fieldset>
</form>

mySubmit.js

'use strict';

var app = angular.module('myApp');

app.directive('mySubmit', function($parse, $log) {
  return {
    restrict: 'A',
    require: 'form',

    compile: function(element, attrs) {
      var onSubmit = $parse(attrs.glSubmit);

      return function(scope, element, attrs, formCtrl) {
        element.on('submit', function(event) {
          $log.debug('[gl] submitting form', formCtrl.$name, element, formCtrl);

          // make the form as submitted
          formCtrl.$submitted = true;
          scope.$digest();

          if (formCtrl.$valid) {
            // submit the form and handle a promise
            var promise = onSubmit(scope, { $event: event });

            if (promise && angular.isObject(promise)) {
              // disable/enable form controls
              formCtrl.$saving = true;

              promise.finally(function() {
                formCtrl.$saving = false;
              });

              // on success: reset the form
              promise.then(function() {
                formCtrl.$setPristine();
                formCtrl.$submitted = false;
              });

              // on error: handle server side errors
              promise.catch(function(response) {
                var errors = response.data.errors;
                if (!errors) { return; }

                formCtrl.$serverErrors = {};

                angular.forEach(errors, function(error, field) {
                  formCtrl[field].$setValidity('server', false);
                  formCtrl.$serverErrors[field] = error.message;
                });
              });
            }
          }
        });
      };
    }
  };
});