generic semantic ui directive

gistfile1.js

/**
 * semanticUi - Generic directive for Semantic UI Javascript initialization.
 */
'use strict';

angular.module('cozumo')

.directive('semanticUi', function ($timeout) {
  return {
    restrict: 'A',
    require: '?ngModel',
    scope: {
      options: '=',
      type: '@',
      visible: '='
    },
    link: function (scope, element, attrs, ngModel) {
      var uiElement = $(element)[0];
      var options = angular.copy(scope.options) || {};

      if (scope.type === 'dropdown') {
        options.onChange = function (value) {
          if (scope.options && scope.options.onChange) {
            return scope.options.onChange(value);
          }
          if (!ngModel) {
            return;
          }
          ngModel.$setViewValue(value);
        };
      }

      if (scope.type === 'modal') {
        options.onHidden = function () {
          scope.visible = false;
          scope.$apply();
        };
      }

      var semanticElement = $(uiElement)[scope.type](options);

      if (scope.type === 'modal') {
        scope.$watch('visible', function (value) {
          if (value) {
            semanticElement.modal('show');
          } else {
            semanticElement.modal('hide');
          }
        });
      }

      if (scope.type === 'dropdown') {
        if (ngModel) {
          ngModel.$render = function () {
            var newValue = ngModel.$viewValue;
            $timeout(function () {
              if (newValue !== null &&
                  newValue !== undefined &&
                  newValue !== '') {
                semanticElement.dropdown('set selected', newValue);
              } else {
                semanticElement.dropdown('clear');
              }
            });
          };
        }
      }
    }
  };
});