Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.min.js"></script>
<div ng-controller="MyCtrl">
  <div color="colorId">
      <div ng-repeat="item in items" id="{{ item.id }}">
          {{ item.name }}
      </div>
  </div>
</div>

JavaScript

var myApp = angular.module('myApp',[]);

myApp.directive("color", function ($q) {
    return {
        restrict: "A",   
        link: function (scope, element, attributes) {

            var name = attributes.color,
                el = element[0];
            
                scope.$watch(name, function () {
                    var id = scope[name];
                    console.log(id); //id1
                    console.log(element.children().eq(0).attr("id")); //{{ item.id }}
                    element.find("#"+id).css("background-color","red");
                });
        }       
    };
});

function MyCtrl($scope) {
    $scope.items = [
        { id:"id1", name:"item1" },
        { id:"id2", name:"item2" }
    ];
    
    $scope.colorId="id1";
}