title: required on custom directive select
body: <p>I have created my own select dropdown using an unordered list and ng-repeat.
  The problem with this directive is that it does not work as a normal select/input/textarea where you can use required when using it in a html form. </p>
  
  <p>So how do I implement the option required/ng-required (as directive) with validation on a custom directive? </p>
  
  <p>Should I use an own implementation of the validation?</p>
  
  <p><strong>dropdown.html</strong></p>
  
  <pre><code>&lt;!-- displayed text on the select --&gt;
  &lt;div class="title"
       ng-class="{'placeholder': !hasSelected(), 'selected': isOpened}"
       ng-mousedown="openSelect()"&gt;
      {{getTitle()}}
  
      &lt;div class="icon" ng-class="{'active': isOpened}"&gt;
          &lt;i class="fa fa-caret-down"&gt;&lt;/i&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- displayed options when opening the select dropdown --&gt;
  &lt;div class="options"&gt;
      &lt;ul ng-show="isOpened"&gt;
  
          &lt;!-- First option is only shown when an empty option is required --&gt;
          &lt;li ng-click="select(null)"
              ng-show="hasEmptyOption() &amp;&amp; isSelected()"
              class="empty"&gt;
              {{empty}}
          &lt;/li&gt;
  
          &lt;!-- Options of the select --&gt;
          &lt;li ng-repeat="option in options track by $index"
              ng-click="select($index)"
              ng-class="{'active': isActive($index)}"&gt;
              {{option}}
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>dropdown.js</strong></p>
  
  <pre><code>app.module.directive('dropdown', ['$document',
      function ($document) {
          'use strict';
  
          return{
              restrict: "E",
              scope: {
                  model: "=",
                  empty: "@",
                  message: "@",
                  options: "="
              },
              templateUrl: 'app/common/directive/dropdown/dropdown.partial.html',
              link: function (scope, elem, attrs) {
                  scope.message = "My message";
                  scope.isOpened = false;
  
                  scope.isSelected = function () {
                      return scope.model &amp;&amp; scope.model !== null;
                  };
  
                  scope.hasEmptyOption = function () {
                      return scope.empty &amp;&amp; scope.empty !== null;
                  };
  
                  scope.hasSelected = function () {
                      return (scope.selected);
                  };
  
                  scope.select = function (index) {
                      if (index !== null) {
                          scope.model = scope.options[index];
                      } else {
                          scope.model = null;
                      }
                      scope.closeSelect();
                  };
  
                  scope.closeSelect = function () {
                      scope.isOpened = false;
                      $document.unbind('click');
                      elem.unbind('click');
                  };
  
                  scope.openSelect = function () {
                      if (scope.isOpened) {
                          scope.closeSelect();
                      } else {
                          scope.isOpened = true;
                          $document.bind('click', function () {
                              scope.closeSelect();
                              scope.$apply();
                          });
                          elem.bind('click', function (e) {
                              e.stopPropagation();
                          });
                      }
                  };
  
                  scope.getTitle = function () {
                      if (scope.model &amp;&amp; scope.model !== null) {
                          return scope.model;
                      } else if (scope.message) {
                          return scope.message;
                      } else {
                          return "Select";
                      }
                  };
              }
          };
      }
  ]);
  </code></pre>
  
  <p>usage</p>
  
  <pre><code>&lt;dropdown message="Select state" model="selectedState" options="states" empty="unselect"&gt;&lt;/dropdown&gt;
  </code></pre>
  
  <p>Preview</p>