javascript - Apply Angular.js to new DOM Element in Chrome Extension Content Script -

okay, i've been @ while.

in red box, want have angular functionality (ng-repeats, data binding, etc...) red box appears when text on any webpage double clicked. however, can't seem find out how angular wired/hooked text box example in red popup.

it seems trivial use angular in badge popup in chrome, on options pages, etc...but can't seem working in instance.

inject.js (which included content script in manifest, below)

    var displaypopup = function(event) {      var mydiv = document.createelement('div');      var $div = $('#divid').closest('.sentence');     mydiv.innerhtml = getselectiontext();     mydiv.innerhtml += currentsentence.innerhtml;          //next line want apply angular functionality         mydiv.innerhtml += '<div ng-app="myapp" scroll-to-me><input type="text" ng-model="data.test"><div ng-model="data.test">{{data.test}}</div></div>';        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);     });   } 

and manifest.json content script array looks like:

"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"       ]     }   ] 

and app.js, included in manifest, skeletal app , running.

var myapp = angular.module("myapp", []);  myapp.factory('data', function(){     //return {message: "i'm data service"}; });  myapp.controller("secondctrl", function($scope, $http){  }); 

you need bootstrap manually if you’re injecting markup after page loads. angular run ng-app if it’s present when document loaded. afterwards, pass module name angular.bootstrap:

angular.bootstrap(mydiv, ['myapp']) 

example.