I'm building an app using Mobile Angular UI and I'm working with the scroll page from the demo app: http://mobileangularui.com/demo/#/scroll
I'd like to programmatically show/hide the Search Bar.
For example, when I receive a "q" param from the querystring, I'd like to have the search bar activated, when the user clicks on the "show search bar button" I'd like the search input box to receive focus, when the user searches something I'd like to hide the search bar, and so on.
this is the html code for the input box:
<input ng-if="Ui.active('searchBar')" class="form-control scrollable-header needsclick ng-scope" placeholder="Search.." type="search">
and this is the html for the toggle buttons:
<a class="btn btn-block btn-lg btn-primary scrollable-footer" ui-toggle="searchBar">
<i class="fa fa-search"></i>
<span class="ng-hide" ui-hide="searchBar">Show</span>
<span class="" ui-show="searchBar">Hide</span>
Search Bar
</a>
What would be the correct way to achieve it?
