title: better understanding scope directive
body: <p>I have rows and cols as followed:</p>
  
  <pre><code>      &lt;ul class="ulgen clearfix" &gt;
          &lt;li class="clearfix" ng-repeat='game in games| limitTo:limitrows'&gt; 
             &lt;div class="col1"&gt;{{game.id}}&lt;/div&gt;
             &lt;div class="col2"&gt;
                &lt;span winner1 id="g{{$parent.$index+game.id}}1" ng-click="check($parent.$index,game.id,1)" data-row="{{game.id}}" data-col="{{$parent.$index+1}}" data-type="1" data-checked="0" class="gamebtncommen"&gt;
                   {{game.value| split:'-':0}}
                &lt;/span&gt;
             &lt;/div&gt; 
             &lt;div class="col3"&gt;
                &lt;span winner1 id="g{{$parent.$index+game.id}}0" ng-click="check($parent.$index,game.id,0)" data-row="{{game.id}}" data-col="{{$parent.$index+1}}" data-type="0" data-checked="0" class="gamebtncommen"&gt;X&lt;/span&gt;
             &lt;/div&gt; 
             &lt;div class="col4"&gt;
                &lt;span winner1 id="g{{$parent.$index+game.id}}2" ng-click="check($parent.$index,game.id,2)" class="gamebtncommen" data-row="{{game.id}}" data-col="{{$parent.$index+1}}" data-type="2" data-checked="0"&gt;
                   {{game.value| split:'-':1}}
                &lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
  </code></pre>
  
  <p>then I have built this directive:</p>
  
  <pre><code>   tmControllers.directive('winner1', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
       scope.check = function(col, row, type) {
          col++;
          console.log(element);
          var el = element//$('.gamebtncommen[data-row="' + row + '"][data-col="' + col + '"][data-type="' + type + '"]');
          if (el.hasClass('orangeback')) {
             el.removeClass('orangeback');
             element.attr('data-checked', 0);
             scope.clacprice();
          } else {
             el.addClass('orangeback').data('checked', 1);
             element.attr('data-checked', 1);
             scope.clacprice();
          }
       }
  
       scope.clacprice = function() {
  
          var siz = $('.gamebtncommen[data-col="1"][data-checked="1"]').size();
  
          console.log(siz);
  </code></pre>
  
  <p>the problem is that a row is getting same scope when checking the span, I want that the directive will change each span data, each row get data checked 1, while I would expact it to be 3 if 3 spans are checked</p>