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

Answer 2

在适配设备后边加个<span></span>来显示图标。如果图标在class里边定义（推荐），那么就用ng-class方法来判断。如果不是，就在controller中图标的点击事件里边切换图标的路径就可以了。