quickie directive for buttons

spinButton.js

(function () {
  'use strict';
  /**
    <button class="custom"
            title="approve"
            spin-button
            ng-click="approve()"
            ng-if="cached.IsApprove"
            ng-class="currentItem.asset.RatedOnDateTime ? 'custom approve filled' : 'custom'"
            toggle-condition="currentItem.asset.RatedOnDateTime"
            toggle-text="Approved:Approve">
    </button>
  **/
  angular.module('application').directive('spinButton', function () {
    return {
      restrict: 'A',
      scope: true,
      replace: false,
      transclude: true,
      template: '<ng-transclude ng-show="!cog"></ng-transclude><span ng-show="cog" class="glyphicon glyphicon-cog spinning ng-hide"></span>',
      priority: -1,
      link: function (scope, elem, attrs) {
        scope.cog = false;
        var toggleText = attrs.toggleText.split(':');
        var initState = scope.$eval(attrs.toggleCondition);
        elem.addClass('spinButton');
        console.log(scope.$eval(attrs.toggleCondition), attrs.toggleCondition);
        elem[0].children[0].innerText = !initState ? toggleText[1] : toggleText[0];
        // this is a hacky solution, find something better.
        scope.$on('photoChanged', function () {
          elem.removeClass('animate');
        });
        // end hack
        elem.attr('style', 'min-width: ' + elem[0].clientWidth + 'px');
        elem.bind('click', function (e) {
          e.stopImmediatePropagation();
          e.preventDefault();
          var currentText = elem[0].children[0].innerText;
          console.log(currentText, toggleText);
          scope.cog = true;
          scope.$eval(attrs.ngClick).then(function () {
            var state = scope.$eval(attrs.toggleCondition);
            console.log(state);
            elem[0].children[0].innerText = !state ? toggleText[1] : toggleText[0];
            scope.cog = false;
            elem.addClass('animate');
          }).catch(function () {
            elem.addClass('animate');
            scope.cog = false;
          });
        });
      }
    };
  });
})();

/* WebKit and Opera browsers */
@-webkit-keyframes spinner {
from { -webkit-transform: rotateZ(0deg); }
to { -webkit-transform: rotateZ(360deg); }
}

/* all other browsers */
@Keyframes spinner {
from {
-moz-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
to {
-moz-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
}
.spinning{
-webkit-animation-name: spinner;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 1s;

animation-name: spinner;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 1s;

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;

}

added toggletext stuff