ng-style assign dynamic scope variable from $index

Question

I'm trying to assign a scope variable's value to an ng-style directive but the name is not parsing.

What am I doing wrong? When you press the TEST button it should turn the text to RED but the scope variable is not parsing as it's name is dynamic. I've tried multiple different syntax which all didn't work.

Here is the html:

<div ng-app="myApp" ng-controller="MyCtrl">  
<button ng-click="Test()">test</button>
<div ng-repeat="item in items">
   <div ng-style="{{'DynamicVariable-'+$index}}">
    {{someone.name}}
   </div>
  </div>
</div>

controller code

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', function($scope) {
  $scope.someone = {
    name: 'John'
  };
$scope.items=[1,2,3,4,5,6,7,8,9];
  $scope.mainId = 1;
  $scope.Test=function(){
      for(var i=0;i<$scope.items.length;i++){
    $scope["DynamicVariable-"+i]={color:'red'};    
  }
  console.log($scope);
  };
}]);

js fiddle that doesn't work: http://jsfiddle.net/avboivin/0qov365b/4/

Answer 1

It has a problem with '-', try to remove it

html:

<div ng-app="myApp" ng-controller="MyCtrl">
    <button ng-click="Test()">test</button>
    <div ng-repeat="item in items">
        <div ng-style="{{'DynamicVariable'+$index}}">
            {{ someone.name }}
        </div>
    </div>
</div>

controller:

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', function ($scope) {
    $scope.someone = {
        name: 'John'
    };
    $scope.items = [1, 2, 3, 4, 5, 6, 7, 8, 9];
    $scope.mainId = 1;
    $scope.Test = function () {
        for (var i = 0; i < $scope.items.length; i++) {
            $scope["DynamicVariable" + i] = { color: 'red' };
        }
        console.log($scope);
    };
}]);

fork