title: AngularJS - Manipulating a group of DOM after ng-repeat
body: <p>I have a list of products, and each product has more than one color for user to choose from and when a color is clicked a tick will show up. so what I am trying to do are:</p>
  
  <ol>
  <li>only one tick will show up in a group of color</li>
  <li>when a user click ADD link, parameters will be passed, and tell me the product id and if a color has been chosen</li>
  </ol>
  
  <p><strong><em>My Problems</em></strong>
  I could not make other ticks disappear within a group when a user click on a color. </p>
  
  <p>Please use the following link and click a color for better demonstration
  <a href="http://codepen.io/kongfupanda/pen/zGBmwp" rel="nofollow">this is the example</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="col-lg-4 col-md-4 col-sm-6" ng-repeat="product in products"&gt;
               &lt;div class="product-container"&gt;
                   &lt;h2&gt;{{product.name}}&lt;/h2&gt;
                   &lt;strong&gt;Choose a Color&lt;/strong&gt;
                   &lt;div class="cycle-colors big-cycle" &gt;
                      &lt;i single-cycle-color ng-repeat="color in colors" class="cycle-color" bgcolor="{{color.code}}"&gt;&lt;/i&gt;
                  &lt;/div&gt;
                  &lt;div class="text-right" &gt;
                      &lt;a class="add" ng-click="addProduct(product.id)" &gt;ADD&lt;/a&gt;
                  &lt;/div&gt;
               &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript</p>
  
  <pre><code>    var app = angular.module('app', []);
  
  
  app.controller('ProductController', ['$scope', function ($scope) {
  
      $scope.products = [
         {id:'1', name:'Product Name'},
         {id:'2', name:'Product Name'},
         {id:'3', name:'Product Name'},
         {id:'4', name:'Product Name'},
         {id:'5', name:'Product Name'},
         {id:'6', name:'Product Name'}
  
      ];
  
      $scope.colors = [
         {code:'#f1f3f3'},
         {code:'#b9bcbf'},
         {code:'#737d82'},
         {code:'#323237'},
         {code:'#00d7ff'},
         {code:'#0069d2'},
         {code:'#c0df16'},
         {code:'#24586e'},
         {code:'#112f3b'}
      ];
  
      $scope.addProduct = function(id){
              alert(id);
      }
  
  }]);
  
  app.directive('singleCycleColor', function () {
  return {
          restrict: "AE",
          scope: {'bgcolor':'@'},
          replace:false,
          link: function (scope, element, attrbute) {
  
                  //
                  element.css('background-color', scope.bgcolor);
  
                  // using white or black tick
                  if (scope.bgcolor == '#ffffff') {
                      // using black tick
                      var tickClass = 'tick-black';
                  } else {
                      // using black white tick
                      var tickClass = 'tick-white';
                  }
  
                  // on cycle click
                  element.on('click', function () {
  
                      // add tick class
                      element.addClass(tickClass);
                      element.addClass('active');
                  });
  
          }
      };
  });
  </code></pre>