title: Custom Validation With Angular Bootstrap Dropdown
body: <p>here's the situation. I've got an angular bootstrap dropdown that displays a list of "organizations" to be selected. It looks like this:</p>
  
  <pre><code>&lt;button type="button" class="btn btn-primary dropdown-toggle" ng-disabled="disabled"&gt;
    &lt;span class="caret"&gt;&lt;/span&gt;
  &lt;/button&gt;
  &lt;ul class="dropdown-menu scrollable-menu" role="menu"&gt;
    &lt;li ng-repeat="org in organizations | orderBy:'Name'"&gt;&lt;a href="#" ng-click="pickNewOrg(org)"&gt;{{org.Name}}&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I've also got a text input to allow for typing in the organization name, with angular's bootstrap typeahead and a custom validator to make sure the organization typed in is actually in my list of organizations. It looks like this:</p>
  
  <pre><code>&lt;input name="organization" 
    type="text" 
    ng-model="activity.org" 
    typeahead="org as org.Name for org in organizations | filter:$viewValue" 
    valid-organization/&gt; 
  </code></pre>
  
  <p>Here's the issue: the validation works fine if the text is typed into the input (where the validator's directive is), but the validation isn't called if an object is selected from the dropdown. So, if an incorrect organization is typed in, the validity is set to false, but if an organization is then clicked out of the menu, it remains false, not having been validated. Since anything clicked in the dropdown is valid, I'm wondering how I can re-use my validator on button click? Or perhaps another method would be better?</p>