Search Box for AngularJS Using Bootstrap with List and Grid View Buttons

ngSearchBox.html

<!-- Full width search box with icons and actions associated to List and Grid Views -->
<!-- Requires Angular (1.3 used here), Bootstrap (3), and Font Awesome -->
<div class="row">
    <div class="input-group m-b">
        <span class="input-group-addon"><i class="fa fa-search"> </i></span>
        <!-- auto-focus is a directive also found as a gist here. It sets the focus to an element on load. -->
        <input class="form-control" auto-focus ng-init="$scope.searchQuery = $stateParams.query" type="text" minlength="3" maxlength="100" ng-model="searchQuery" placeholder="Search...">
        <!-- List and Grid view buttons. Other elements watch listView and change as it does.  -->
         <!-- If using more than two states, this will need to be reworked. But it's easier as a boolean -->
        <div class="input-group-addon">
            <button type="button" tabindex="-1" ng-init="listView = true" ng-click="listView = true" ng-class="{'active' : listView}" class="btn btn-xs btn-default active"><span class="glyphicon glyphicon-th-list"></span> List</button>
            <button type="button" tabindex="-1" ng-click="listView = false" ng-class="{'active' : !listView}" class="btn btn-xs btn-default"><span class="glyphicon glyphicon-th"></span> Grid</button>
        </div>
    </div>
</div>