Setting dynamic scope variables in AngularJs

This my frist time with AngularJs.I have problem about setting expression in ng-style I try to set expression in ng-style by 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>

add style in Anglar.js like this

$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) "
   };

}

I think setting method $scope.variable_name is the wrong way Have you have a suggestion for me? Thank you