title: Apply Angular.js to new DOM Element in Chrome Extension Content Script
body: <p>Okay, so I've been at this for a while.</p>
  
  <p>In the red box, I want to have some angular functionality (ng-repeats, data binding, etc...) This red box appears when text on <em>any webpage</em> is double clicked. However, I can't seem to find out how to actually get angular wired/hooked up to the text box example in the red popup. </p>
  
  <p>It seems fairly trivial to use angular in a badge popup in chrome, as well as on options pages, etc...but I can't seem to get it working in this instance.</p>
  
  <p><img src="https://i.stack.imgur.com/NHRfz.png" alt="example of a div element being added to the DOM of any webpage upon double-clicked text"></p>
  
  <p><strong>inject.js</strong> (which is included as a content script in manifest, below)</p>
  
  <pre><code>    var displayPopup = function(event) {
  
      var mydiv = document.createElement('div'); 
      var $div = $('#divid').closest('.sentence');
      mydiv.innerHTML = getSelectionText();
      mydiv.innerHTML += currentSentence.innerHTML;
  
          //Next line is where I want to apply some angular functionality
          mydiv.innerHTML += '&lt;div ng-app="myApp" scroll-to-me&gt;&lt;input type="text" ng-model="data.test"&gt;&lt;div ng-model="data.test"&gt;{{data.test}}&lt;/div&gt;&lt;/div&gt;';
  
  
  
      mydiv.id = "popup";
      mydiv.style.position = "fixed";
      mydiv.style.top = event.clientY + "px";
      mydiv.style.left = event.clientX + "px";
      mydiv.style.border = "4px solid #d00";
      mydiv.style.background = "#fcc";
  
          $("body").append(mydiv);
  
      $.getJSON('http://local.wordly.com:3000/words/definitions/test', function(data) {
        console.log(data);
      });
    }
  </code></pre>
  
  <p>and my <strong>manifest.json</strong> content script array looks like:</p>
  
  <pre><code>"content_scripts": [
      {
        "matches": [
          "https://www.google.com/*"
        ],
        "css": [
          "src/inject/inject.css"
        ]
      },
      {
        "matches": [
          "http://*/*", 
          "https://*/*"
        ],
        "js": [
          "js/angular/angular.js", "app.js", "js/jquery/jquery.js", "src/inject/inject.js"
        ]
      }
    ]
  </code></pre>
  
  <p>and <strong>app.js</strong>, also included in manifest, for just some skeletal app to get up and running.</p>
  
  <pre><code>var myApp = angular.module("myApp", []);
  
  myApp.factory('Data', function(){
      //return {message: "I'm data from a service"};
  });
  
  myApp.controller("SecondCtrl", function($scope, $http){
  
  });
  </code></pre>