Using a directive template

Basic Angular Directive

qaApp.directive('qaAction', function () {                                       
    return {                                                                    
        restrict: 'E',                                                          
        scope: {title: '@'},                                                    
        templateUrl: "action.html",                                             
        scope: {                                                                
            'action': '='                                                       
        },                                                                      
        controller: function ($http, $scope, $rootScope) {                      
        }                                                                       
    }                                                                           
});
---------------------------------------------------------------------------------------
<div ng-app="qaApp" ng-controller="qa_view" class="main-content">
    <script type="text/ng-template" id="action.html">
    <div class="action status-{$ action.fields.status $}">
            <div class="info">
                <div style="float:left; margin: 5px 0 -5px 5px;">
                    <span class="status-icon" ng-class="getIcon(action.fields.status)" ng-show="getIcon(action.fields.status)"></span>
                    <span ng-class="getIcon(action.fields.action)" ng-show="getIcon(action.fields.action)"></span>
                    <span ng-class="getIcon(action.fields.mood)" ng-show="getIcon(action.fields.mood)"></span>
                </div>
                <a class="close-x" href=""><span ng-click="deleteAction(action.attrs.pk)" style="padding: 0px;" class="fa fa-times-circle"></span></a>
                <p><i>By {$ action.attrs.owner $} on <strong>{$ action.attrs.pretty_taken $}</strong></i></p>
            </div>
            <div class="well">
                <p ng-show="showDate(action.fields.status)">Follow up: <strong>{$ action.attrs.pretty_follow_up_date $}</strong></p>
                <p ng-bind-html="action.fields.comment | nl2br | safe"></p>
            </div>
        </div> 
    </script>
------------------------------------------------------------------------------------------
<qa-action class="actions" ng-repeat="action in case_action_data" action="action"></qa-action>                                                                            
~