Angular annotator demo

<!DOCTYPE html>
<html>

  <head >
    <script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script data-require="angular.js@1.3.7" data-semver="1.3.7" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js"></script>
    <script src="http://assets.annotateit.org/annotator/v1.2.10/annotator-full.min.js"></script>
    <script src="https://rawgit.com/mwasiluk/annotator-validation-plugin/master/src/annotator-validation-plugin.js"></script>
    
    <script src="angular-annotator.js"></script>
    
    
    <link rel="stylesheet" href="http://assets.annotateit.org/annotator/v1.2.10/annotator.min.css">
    <link rel="stylesheet" href="style.css" />

    <script src="script.js"></script>
  </head>

  <body ng-app="app" ng-controller="AnnotatorController">
    
    <div mw-annotator="{}" annotator-permissions="{user: 'Alice'}" annotator-plugins="['Validation','Tags', {name: 'Filter', options: filterOptions}]">
      
      <h1>angular-annotator demo</h1>
      An angularjs directive that wraps annotator.js functionality.
      <br/><br/>
      https://github.com/mwasiluk/angular-annotator
      
      <br/><br/>
      Annotation validation plugin used in demo: <a href="https://github.com/mwasiluk/annotator-validation-plugin" target="_blank">github.com/mwasiluk/annotator-validation-plugin</a>
      <br/><br/>
      
      Demo on github page: <a href="http://mwasiluk.github.io/angular-annotator/" target="_blank">mwasiluk.github.io/angular-annotator/</a>

      <br/> <br/>
      
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vulputate tortor nec dictum maximus. Maecenas a lacus a turpis tempus dapibus non vel dui. Suspendisse blandit luctus fringilla. Suspendisse condimentum tellus non urna pretium vulputate. Nulla pharetra consequat elit, at egestas sapien venenatis a. Sed eget efficitur elit. Aliquam ac orci sollicitudin, mollis lacus vel, condimentum orci.
      
      <br/>
      
    </div>
  </body>

</html>

angular.module('app', ['mwAnnotator'])
.controller("AnnotatorController", function($scope){
  $scope.filterOptions = {
    filters: [
      {
        label: 'Quote',
        property: 'quote'
      }
    ]
  }
});

/* Styles go here */

angular.module('mwAnnotator', []);

angular.module('mwAnnotator').directive('mwAnnotator', function () {

    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var options = {};
            if(attrs.mwAnnotator){
                options = scope.$eval(attrs.mwAnnotator);
            }

            var annotator = angular.element(element).annotator(options).data('annotator');
            annotator.addPlugin('Unsupported');

            if(attrs.annotatorTags){
                annotator.addPlugin('Tags');
            }

            if(attrs.annotatorPermissions){
                var permissionsOptions = scope.$eval(attrs.annotatorPermissions);
                annotator.addPlugin('Permissions', permissionsOptions);
            }

            if(attrs.annotatorStore){
                var storeOptions = scope.$eval(attrs.annotatorStore);
                annotator.addPlugin('Store', storeOptions);
            }

            if(attrs.annotatorFilter){
                var filterOptions = scope.$eval(attrs.annotatorFilter);
                annotator.addPlugin('Filter', filterOptions);
            }

            if(attrs.annotatorAuth){
                var authOptions = scope.$eval(attrs.annotatorAuth);
                annotator.addPlugin('Auth', authOptions);
            }


            if(attrs.annotatorMarkdown){
                annotator.addPlugin('Markdown');
            }

            if(attrs.annotatorPlugins){
                var pluginList = scope.$eval(attrs.annotatorPlugins);
                if(pluginList instanceof Array){
                    for(var i=0; i<pluginList.length; i++){
                        var plugin = pluginList[i];


                        var pluginName = null;
                        var pluginOptions = null;
                        if(typeof plugin === 'object'){
                            pluginName = plugin.name;
                            pluginOptions = plugin.options;
                        }else if(typeof plugin === 'string'){
                            pluginName = plugin;
                        }
                        if(pluginName){
                            if(!pluginOptions){
                                annotator.addPlugin(pluginName)
                            }else{
                                annotator.addPlugin(pluginName, pluginOptions);
                            }

                        }

                    }
                }
            }
        }
    };
});