Dropdown Checkbox Closes when Item Checked, and Doesn't Save Selection

Question

I'm new to Javascript and AngularJS, and currently trying to implement a dropdown checkbox via a button (For a search filter). I currently am able to have the dropdown appear, but when I check a checkbox, the dropdown immediately closes. The checked item is also not saved as checked when I open the dropdown again. Here's what I have in my tpl.html:

<div class="input-group-btn">
     <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" bs-dropdown data-template-url="dropdown-template" data-placement="bottom-right">
        <span class="fa fa-filter"></span>
     </button>

     <li class="dropdown-filter">
        <script type="text/ng-template" id="dropdown-template">
            <ul class="dropdown-menu">
                <div>
                   <input type="checkbox" id="disabledStores">
                   <label for="disabledStores">Show Disabled Stores</label>
                </div>
            </ul>
        </script>
     </li>
</div>

What am I doing wrong?

Answer 1

You need to save the value of the selection within a property and use the ng-model to bind to the html.

In your controller must have : disabledStored : boolean = false.

And in your templare : <input type="checkbox" id="disabledStores" ng-model="disabledStored">

When the checkbox is selected the value of the property will be true.