其他 - 在AngularJs中设置动态范围变量

这是我第一次使用AngularJs。ng-style 我在设置表达式时遇到问题，我尝试ng-style通过item.variable_name

    <div class="col-lg-4" ng-repeat="item in MenuModel"
         ng-style="item.variable_name"
         ng-mouseover="onMouseOver(item.color,item.variable_name)" >
        <div class="col-md-12 sub-menu" ng-click="clickmenu(item.id)" >
            <div class="row">
                <div class="col-xs-3 menu-icon" style="background-color:{{item.color}};" >
                    <img class="img-icon" src="~/Resources/{{item.icon}}" />
                </div>
                <div class="col-xs-9" style="display:inline-block">
                    <h3 style="color:{{item.color}};">{{item.menu_name_th}}</h3>
                </div>
            </div>
        </div>
    </div>
</div>

像这样在Anglar.js中添加样式

$scope.onMouseOver = function (color, variable_name) {

   $scope.variable_name = {
      'box-shadow': "0 4px 8px 0 " + color + ", 0 6px 20px 0 rgba(0, 0, 0, 0.19) "
   };

}

我认为设置方法$scope.variable_name是错误的方法您对我有什么建议吗？谢谢