title: Getting <li> value with ng-model
body: <p>below I have a selectable dropdown list. I need to pass the choosed value to ng-model directive:</p>
  
  <pre><code>ng-model="$root.specCategory_search"
  </code></pre>
  
  <p>But its not working in my example. How can I do it?
  Previously I used it with select option and its working fine with ng-model directive. For that I used the value="" attribute within option tag. </p>
  
  <p><strong>HTML Dropdown</strong> </p>
  
  <pre><code>&lt;div class="btn-group"&gt;
     &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;
     &lt;span ng-model="$root.specCategory_search" data-bind="label"&gt;Select One&lt;/span&gt;&amp;nbsp;&lt;span class="caret"&gt;&lt;/span&gt;
     &lt;/button&gt;
     &lt;ul class="dropdown-menu" role="menu" &gt;
        &lt;li&gt;&lt;a href="#"&gt;First item&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Another item&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;This is a longer item that will not fit properly&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.btn-input {
     display: block;
  }
  
  .btn-input .btn.form-control {
      text-align: left;
  }
  
  .btn-input .btn.form-control span:first-child {
     left: 10px;
     overflow: hidden;
     position: absolute;
     right: 25px;
  }
  
  .btn-input .btn.form-control .caret {
     margin-top: -1px;
     position: absolute;
     right: 10px;
     top: 50%;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>      $( document.body ).on( 'click', '.dropdown-menu li', function( event ) {
  
        var $target = $( event.currentTarget );
  
        $target.closest( '.btn-group' )
           .find( '[data-bind="label"]' ).text( $target.text() )
              .end()
           .children( '.dropdown-toggle' ).dropdown( 'toggle' );
  
        return false;
  
     });
  </code></pre>