Javascript 移动角度UI：以编程方式控制UI切换元素

我正在使用构建一个应用程序，并且正在使用演示应用程序中的滚动页面：

我想以编程方式显示/隐藏搜索栏

例如，当我从querystring收到一个“q”参数时，我希望激活搜索栏，当用户单击“显示搜索栏按钮”时，我希望搜索输入框接收焦点，当用户搜索某个内容时，我希望隐藏搜索栏，等等

这是输入框的html代码：

<input ng-if="Ui.active('searchBar')" class="form-control scrollable-header needsclick ng-scope" placeholder="Search.." type="search">

这是切换按钮的html：

<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>

显示
隐藏
搜索栏

实现这一目标的正确方法是什么