title: AngularJS hover effect on change background color with dynamic color code
body: <p>I want to have hover effect on a div to change the color based on the color code I passed to. My idea is to pass color code to a directive and then call <code>element.css()</code>. However, I also need to add the hover class to the particular div using<code>element.addClass(hoverclass)</code>. Now, I got stuck because I don't know how to approach this.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div ng-repeat="social in socialArray"&gt;{{social.name}}&lt;/div&gt;
  </code></pre>
  
  <p>this will give me somthing like:</p>
  
  <pre><code>&lt;div&gt;Facebook&lt;/div&gt;
  &lt;div&gt;Flickr&lt;/div&gt;
  &lt;div&gt;Google+&lt;/div&gt;
  &lt;div&gt;Instagram&lt;/div&gt;
  &lt;div&gt;Linkedin&lt;/div&gt;
  </code></pre>
  
  <p>And my JS file:</p>
  
  <pre><code>$scope.socialArray = [
       {name:"Facebook", color:"#3B5998"}, 
       {name:"Flickr",color:"#FE0883"}, 
       {name:"Google+",color:"#C63D2D"}, 
       {name:"Instragram",color:"#4E433C"},    
       {name:"Linkedin",color:"#4875B4"}
  ];
  </code></pre>
  
  <p>My css:</p>
  
  <pre><code>.change-color{
    transition: 0.4s all;
  }
  
  .change-color:hover, .change-color:focus, .change-color:active{
    color: #fff;
    background-color:  #e38d13;
    cursor: pointer;
  }
  </code></pre>
  
  <p>I want to be able to change the background-color dynamically based on the color I have in the socailArray. Any suggestion or hint will be awesome. Thank you in advanced!</p>