title: Changing Element Colour on Hover AngularJS
body: <p>So, I'm just getting started with angularjs and I'm already confused. I want to change the colour of a list element that corresponds to a hex code colour that is in an array. I've tried some stuff but I just can't get it.</p>
  
  <p>Here's my code so far:<br>
  HTML</p>
  
  <pre><code>&lt;div id="mainContentWrap" ng-app="newApp"&gt;
   &lt;div id="personContainer" ng-controller="personController"&gt;
  &lt;ul id="personList"&gt;
      &lt;li class="bigBox no_s" ng-style="personColour"  ng-repeat="i in persons" ng-hover="changeColor()"&gt;&lt; href="#/{{i.person_id}}"&gt;{{i.person_name}}&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>var app=angular.module('newApp',[]);
  app.controller('personController',function($scope,$rootScope){
      $rootScope.persons=[
          {person_id:'0',person_name:'Jim',colour:"cc0000"},
          {person_id:'4',person_name:'Bob',colour:"f57900"},
          {person_id:'2',person_name:'James',colour:"4e9a06"},
          {person_id:'9',person_name:'Paul',colour:"3465a4"},
          {person_id:'3',person_name:'Simon',colour:"77507b"}
      ];
      $scope.changeColor(){
          $scope.personColour=$scope.persons.color// not sure what to do here???
      }
  });
  </code></pre>