How can I display the selected element of a dropdown list in a button?

Question

I have this dropdown menu:

  <div class="input-group">

  <div class="input-group-btn">

    <button type="button" class="btn btn-default dropdown-toggle"
    data-toggle="dropdown" aria-haspopup="true"
    aria-expanded="false">

    All Categories

    <span class="caret"></span></button>

    <ul class="dropdown-menu" ng-model = "cat">

      <li><a href="#">All Categories</a></li>
      <li role="separator" class="divider"></li>
      <li><a href="#">Clothes</a></li>
      <li><a href="#">Electronics</a></li>
      <li><a href="#">Books</a></li>
      <li><a href="#">Other</a></li>
    </ul>
  </div>

What can I do to display the chosen element from the list instead of the label of the button which is "All Categories". Alternatively can I remove the label and just set the default selected item to be the first one, which is also "All Categories"?

Also, another question, how can I access the selected value in a JS file using angular?

$scope.cat.value 

Doesnt seem to work.

Answer 1

Declare a $scope.selected variable in your angularjs code.Modify your list-item tags (options) adding ng-click from angularjs for setting the selected variable value. For example:

<li ng-click="selected = 'option1'"><a>Option1</a></li>

If you click it, then the selected variable will be assigned the value "option1".

Another option could be to call a function from angular code inside the ng-click:

ng-click="selectItem('option1')"

Then in angular code:

$scope.selectItem = function(value) { $scope.selected = value; }

If you want to get the value of your angular scope variables just do $scope.variable. In this case it will be $scope.selected