Don't Fear The Directive

<!DOCTYPE html>
<html>

<head>
    <script data-require="angular.js@1.2.4" data-semver="1.2.4" src="http://code.angularjs.org/1.2.3/angular.js"></script>
    <link data-require="font-awesome@4.0.3" data-semver="4.0.3" rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" />
    <script src="script.js"></script>
</head>

<body ng-app="myApp" ng-controller="MainCtrl">
    <div>
        Click on a gear to start or stop it from spinning.
        <br>
        <pre>{{colors}}</pre>
        <input type="button" value="Move It" ng-click="moveIt()"></input>
        <label for="textSize>">Size:</label>
        <input type="text" ng-model="textSize">px
    </div>
    <div>
        <gear ng-repeat="color in colors track by $index"></gear>
    </div>
</body>

</html>

// Code goes here

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

//myApp.factory('myService', function() {});

myApp.controller('MainCtrl', function($scope) {
    $scope.colors = ['red', 'orange', 'yellow', 'green', 'blue', 'indigo', 'violet'];
    $scope.moveIt = function() {
        $scope.colors.unshift( $scope.colors.pop() );
    };
    $scope.textSize = 120;
});

myApp.directive('gear', function() {
    return {
        restrict: 'E',
        controller: function($scope) {
            $scope.spinning = true;
            $scope.stopOrStart = function() {
                $scope.spinning = !$scope.spinning;
            };
        },
        templateUrl: 'gear-widget.html'
    };
});

<i class="fa fa-gear" ng-style="{'color': color,
                                 'font-size': textSize + 'px'}"
                      ng-class="{'fa-spin': spinning}"
                                        ng-click="stopOrStart()"></i>