title: Highlighting words with angular
body: <p>I am trying to allow the user to click on a word in a particular div and that word will be highlighted.  I am very new and <strong>know</strong> that what I have made is not close to working, but I have watched lots of videos and read lots of articles and am stuck.  Even if I don't get an answer of exactly what to do, any direction for my next step would be incredibly helpful.</p>
  
  <p>I think I need a directive that would take the div, divide up the text and add a span around each word.  This div needs a click event that highlights the word. I have gone through lots of iterations and I am getting blocked at every point.</p>
  
  <p>I have plenty of other angular built in directives working on the page, so I know that I have the app in general set up correctly, and I am including the directive in the app module. </p>
  
  <pre><code>&lt;div my-prepare-text ng-bind-html="item.text | unsafe"&gt;&lt;/div&gt;
  
  angular.module('MyDirectives', [])
    .directive('myPrepareText', function() {
  return {
    restrict: 'A',
    link: function(scope, element) {
      var words = element.text().split(' ');
      var text = words.join("&lt;/span&gt; &lt;span my-highlight ng-click='highlight()'&gt;");
      element.html("&lt;p&gt;&lt;span my-highlight ng-click='highlight()'&gt;" + text + "&lt;/span&gt;&lt;/p&gt;");
    };
  };
    })
  </code></pre>