This directive wraps a basic Jarvis Widget from SmartAdmin theme into an AngularJS Module - more at http://www.zelearner.com/?p=40

jarvis-widget.html

<article class="col-xs-12" ng-class="'col-lg-' + jarvis_size">
    <div class="jarviswidget jarviswidget-color-darken jarviswidget-sortable" id="{{jarvis_id}}" role="widget">
        <header role="heading">
            <h2><i class="icon" ng-class="'fa ' + jarvis_icon"></i> <span class="widget-title">{{jarvis_title}}</span></h2>

            <span class="jarviswidget-loader" style="display: none;"><i class="fa fa-refresh fa-spin"></i></span></header>

        <!-- widget div-->
        <div role="content" style="display: block;">

            <!-- widget edit box -->
            <div class="jarviswidget-editbox">
            </div>
            <!-- end widget edit box -->

            <!-- widget content -->
            <div class="widget-body" ng-class="{'no-padding': jarvis_padding == 'false'}" ng-transclude>

            </div>
            <!-- end widget content -->
        </div>
        <!-- end widget div -->
    </div>
</article>

jarvis-widget.js

(function(){
    "use strict";

    angular.module('ngJarvisWidget', [])
    .directive('jarvisWidget', function () {
        return {
            restrict: 'E',
            transclude: true,
            templateUrl: '/themes/admin/js/bower_components/angular-jarvis/jarvis-widget.html',
            scope: {
                jarvis_title: '@title',
                jarvis_padding: '@padding',
                jarvis_icon: '@icon',
                jarvis_size: '@size',
                jarvis_id: '@id'
            }
        };
    });

})();