Bootstrap 3 + AngularJS - Modal example

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.18/angular.js"></script>
<div ng-controller="MainCtrl" class="container">
  <h1>Directive example</h1>
  <form ng-submit="doSubmit()">
    <ui-submit-button btn-state="obj" btn-label="My submit button label" />
  </form>
</div>

JavaScript

var mymodal = angular.module('mymodal', []);

mymodal.controller('MainCtrl', function ($scope, $timeout) {
    $scope.obj = {loading : false};
    $scope.doSubmit = function(){
    	$scope.obj.loading = true;
        $timeout(function() {
        	$scope.obj.loading = false;
        }, 3000);
    };
  });

mymodal.directive('uiSubmitButton', function() {

    return {
      restrict: 'E',
      template : function() {
        return ' \
          <button class="btn btn-success" type="submit" ng-disabled="btnState.loading"> \
            <span ng-show="btnState.loading"> \
				<i class="fa fa-spin fa-cog" /> Processing... \
			</span> \
            <span ng-hide="btnState.loading">{{btnLabel || "Submit"}}</span> \
          </button>';
      },
      replace : true,
      scope : {
        btnState : '=',
        btnLabel : '@'
      }
    };

  });