eperedo/app.js

## app.js
var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $timeout) {
  $scope.save = function(){
    $scope.loading = true;
    $timeout(function(){
      $scope.loading = false;

    }, 3000);
  };
});

## demo.html
<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="http://lab.hakim.se/ladda/css/ladda.css" />

    <script data-require="angular.js@1.1.x" src="http://code.angularjs.org/1.1.5/angular.js" data-semver="1.1.5"></script>
    <script src="http://lab.hakim.se/ladda/js/ladda.js"></script>
    <script src="app.js"></script>
    <script src="directive.js"></script>
  </head>

  <body ng-controller="MainCtrl">
     <form data-ng-submit="save()">
      <button id="w" type="submit" class="ladda-button blue zoom-in" ladda data-ng-model="loading">
          <span class="label">Submit</span>
          <span class="spinner"></span>
       </button>
    </form>
  </body>

</html>

## directive.js
app.directive('ladda', function(){
  return {
    require: '?ngModel',
    restrict: 'A',
   link : function postLink(scope, attr, elem, ctrl){

    var l = Ladda.create( document.querySelector('#'+elem.id));

    scope.$watch('loading', function(newVal, oldVal){
      if (newVal !== undefined){
        if(newVal)
          l.start();
        else
          l.stop();
      }
    });
   }

  };
  });
	var app = angular.module('plunker', []);

	app.controller('MainCtrl', function($scope, $timeout) {
	$scope.save = function(){
	$scope.loading = true;
	$timeout(function(){
	$scope.loading = false;

	}, 3000);
	};
	});
	<!DOCTYPE html>
	<html ng-app="plunker">

	<head>
	<meta charset="utf-8" />
	<title>AngularJS Plunker</title>
	<script>document.write('<base href="' + document.location + '" />');</script>
	<link rel="stylesheet" href="style.css" />
	<link rel="stylesheet" href="http://lab.hakim.se/ladda/css/ladda.css" />

	<script data-require="angular.js@1.1.x" src="http://code.angularjs.org/1.1.5/angular.js" data-semver="1.1.5"></script>
	<script src="http://lab.hakim.se/ladda/js/ladda.js"></script>
	<script src="app.js"></script>
	<script src="directive.js"></script>
	</head>

	<body ng-controller="MainCtrl">
	<form data-ng-submit="save()">
	<button id="w" type="submit" class="ladda-button blue zoom-in" ladda data-ng-model="loading">
	<span class="label">Submit</span>
	<span class="spinner"></span>
	</button>
	</form>
	</body>

	</html>
	app.directive('ladda', function(){
	return {
	require: '?ngModel',
	restrict: 'A',
	link : function postLink(scope, attr, elem, ctrl){

	var l = Ladda.create( document.querySelector('#'+elem.id));

	scope.$watch('loading', function(newVal, oldVal){
	if (newVal !== undefined){
	if(newVal)
	l.start();
	else
	l.stop();
	}
	});
	}

	};
	});