angularjs - required on custom directive select -

i have created own select dropdown using unordered list , ng-repeat. problem directive not work normal select/input/textarea can use required when using in html form.

so how implement option required/ng-required (as directive) validation on custom directive?

should use own implementation of validation?

dropdown.html

<!-- displayed text on select --> <div class="title"      ng-class="{'placeholder': !hasselected(), 'selected': isopened}"      ng-mousedown="openselect()">     {{gettitle()}}      <div class="icon" ng-class="{'active': isopened}">         <i class="fa fa-caret-down"></i>     </div> </div>  <!-- displayed options when opening select dropdown --> <div class="options">     <ul ng-show="isopened">          <!-- first option shown when empty option required -->         <li ng-click="select(null)"             ng-show="hasemptyoption() && isselected()"             class="empty">             {{empty}}         </li>          <!-- options of select -->         <li ng-repeat="option in options track $index"             ng-click="select($index)"             ng-class="{'active': isactive($index)}">             {{option}}         </li>     </ul> </div> 

dropdown.js

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 && scope.model !== null;                 };                  scope.hasemptyoption = function () {                     return scope.empty && 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 && scope.model !== null) {                         return scope.model;                     } else if (scope.message) {                         return scope.message;                     } else {                         return "select";                     }                 };             }         };     } ]); 

usage

<dropdown message="select state" model="selectedstate" options="states" empty="unselect"></dropdown> 

preview

i think bit fast question. sorry that. answer usable else

usage

<dropdown message="select state" model="selectedstate" options="states" empty="unselect" valid-drop-down></dropdown> 

validation_dropdown.js

[edit] changed directive bit better understand, added comment

/**  * based on  * http://stackoverflow.com/questions/24692775/angularjs-setvalidity-causing-modelvalue-to-not-update  */ app.module.directive('validdropdown', [     function () {         return {             require: 'ngmodel',             link: function (scope, elem, attr, ngmodel) {                  // create validators                 ngmodel.$validators.validdropdown = function (modelvalue, viewvalue) {                     /* when no value present */                     var isvalid;                     if (!modelvalue || modelvalue.length === 0) {                         isvalid = false;                     } else {                         isvalid = true;                     }                      /* set required validator not standard html form input */                     ngmodel.$setvalidity('required', isvalid);                      /* set custom validators */                     ngmodel.$setvalidity('validdropdown', isvalid);                      /* return model model updated in view */                     return modelvalue;                 };                  // watch changes model                 scope.$watch(attr.ngmodel, function () {                      /* when model touched before */                     if (ngmodel.$touched) {                         /* when model not dirty, set ngmodel dirty re-applying content */                         if (!ngmodel.$dirty) {                             ngmodel.$setviewvalue(ngmodel.$modelvalue);                         }                     }                      /* when model has value */                     if (ngmodel.$modelvalue) {                         /* when model not touched before */                         if (!ngmodel.$touched) {                             ngmodel.$settouched();                         }                     }                      return ngmodel;                 });                  // validate on creation                 ngmodel.$validate();             }         }     } ]);