See code at, Plunker: http://plnkr.co/edit/jUzCC1FmtgxdX4gWTVIW?p=preview

I used a custom directive with isolated scope:

<!-- App scripts -->
    <script>

        (function () {
            "use strict";

            // This is the starting point (main) for the angular app.
            var app = angular.module("spike", []);


        }());
   
        (function () {
            "use strict";

            // Adds an animation to an element.
            var directive = function () {
                function link($scope, element, attributes, controller) {

                    $scope.$watch('loading', function (newValue, oldValue) {
                        if (newValue === true) {
                            element.removeClass("progress-indicator fa fa-refresh spin");
                            element.addClass("progress-indicator fa fa-refresh spin");
                        }
                        else {
                            element.removeClass("progress-indicator fa fa-refresh spin");
                        }
                    });   
                }

                return {
                    restrict: "EA",  // Directive be used as element and as attribute.
                    link: link,
                    scope: {
                        // This directive expects an attribute "loading".
                        // The value of the attribute "loading" will be watched.
                        // When this value === true, classes will be added to "show" and animate a progressindicator.
                        // When this value !== true, classes will be removed, to stop animation and "hide" the progressindicator.
                        loading: "=loading"
                    }
                };
            };

            angular.module('spike').directive('zvdzProgress', [directive]);
        }());

        (function () {
            "use strict";

            var app = angular.module("spike");

            var controller = function ($scope, $animate) {
                $scope.title = "Start progress animation on click.";
               
                $scope.isLoading = false;

                $scope.start = function () {
                    $scope.isLoading = true;
                };

                $scope.stop = function () {
                    $scope.isLoading = false;
                };
            };

            app.controller("main", ["$scope", controller]);
        }());
    </script>

<div ng-controller="main">
        <h2>{{ title }}</h2>
        <div>
            <br />
            <button ng-click="start()">Start</button>
            <br />
            <br />
            <button ng-click="stop()">Stop</button>
            <br />
            <br />
            <div zvdz-progress loading="isLoading"></div>
        </div>
    </div>

On start ng-click, a refresh icon is shown that spins: