An approach to use jQuery Plugins with AngularJS

http://amitgharat.wordpress.com/2013/02/03/an-approach-to-use-jquery-plugins-with-angularjs/

by Christian Bonato

HTML

<link rel="stylesheet" href="https://paulkinzett.github.io/toolbar/css/documentation.css">
<link rel="stylesheet" href="https://paulkinzett.github.io/toolbar/css/jquery.toolbar.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://paulkinzett.github.io/toolbar/js/jquery.toolbar.min.js"></script>
<div ng-app="Toolbar">
    <div class="btn-toolbar" toolbar-tip="{content: '#toolbar-options', position: 'top'}" id="format-toolbar1">
        <i class="fa fa-cog"></i>
    </div>
    <div class="btn-toolbar" toolbar-tip="{content: '#toolbar-options', position: 'right', style: 'primary'}" id="format-toolbar2">
        <i class="fa fa-cog"></i>
    </div>
    <div class="btn-toolbar" toolbar-tip="{content: '#toolbar-options', position: 'bottom', style: 'primary', animation: 'flip'}" id="format-toolbar3">
        <i class="fa fa-cog"></i>
    </div>

    <div id="toolbar-options">
       <a href="#"><i class="fa fa-plane"></i></a>
       <a href="#"><i class="fa fa-car"></i></a>
       <a href="#"><i class="fa fa-bicycle"></i></a>
    </div>
</div>

CSS

#format-toolbar1, 
#format-toolbar2, 
#format-toolbar3 {
    margin-left: auto;
    margin-right: auto;
}

#toolbar-options { display: none; }

JavaScript

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

App.directive('toolbarTip', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).toolbar(scope.$eval(attrs.toolbarTip));
        }
    };
});