Angularjs 如何简练显示选中项

Question

<div ng-click="show_add = !show_add" click-outside="show_add = false" outside-active="show_add">
     <a>
     {{适配设备}}
     </a>
     <i class="ico-triangle-down"></i>
         <ul  ng-show="show_add">
             <li>
                 <a title="PC显示屏">
                 <i class="ico-screen-pc"></i>
                 </a> 
             </li>
             <li>   
                 <a title="投影仪"> 
                 <i class="ico-screen-projector"></i>          </a> 
             </li>
             <li>
                 <a title="TV显示屏">
                 <i class="bdp-icon ico-screen-tv"></i>
                 </a> 
            </li>
         </ul></div>

上图所示的代码的显示效果如下：

我想实现的效果如下图：
如何做到选中的图标显示在适配设备旁？
在代码里添加什么指令呢？

Answer 1

试试如下代码：$scope.$watch(function(){ return $window.innerWidth; }, function(value) {    console.log(value); });判断尺寸之后，通过ng-if添加选中class