title: adding new AngularJS controller to main page with userscript
body: <p>I'm trying to develop a script for an online game. They're using angularJS on their pages. </p>
  
  <p>Is it possible to attach my own angular controller, written in userscript, running in tampermonkey? Here is part of my code:</p>
  
  <pre><code>// ==UserScript==
  // @name        Inventory extras
  // @version     0.1
  // @include     gameurl.com/*/economy/inventory
  // @description Table with licenses and taxes in the inventory. Scan for prices in sortable table.  Also checks for the old license bug, when aliens are on top of the list of sellers. Now with job offers.
  // @namespace   myNamespace
  // ==/UserScript==
  
  var $ = jQuery;
  
  function AddStyle(t) {
      $("head").append("&lt;style&gt;" + t + "&lt;/style&gt;");
  }
  
  (function() {
      'use strict';
      $("#sell_offers").after('&lt;div class="taxTable" style="display: block;" ng-app="mainApp" ng-controller="licensesController"&gt;' + '&lt;table id="licenses" width="100%"&gt;' + "&lt;thead&gt;" + "&lt;tr&gt;" + '&lt;th style="height: 40px; text-align: center; padding-left: 0px;"&gt; &lt;/th&gt;" + "&lt;/tr&gt;" + "&lt;/thead&gt;" + "&lt;tbody&gt;&lt;/tbody&gt;" + "&lt;/table&gt;" + "&lt;/div&gt;");
      $("#inventory_overview .taxTable table tbody").append("&lt;tr ng-repeat='country in countries'&gt;&lt;td style='padding-left: 5px;' colspan='9'&gt;{{ 'Country: ' + country.name + ', Locale: ' + country.locale }}&lt;/td&gt;&lt;/tr&gt;");
  
      var mainApp = angular.module("mainApp", []);
      mainApp.controller('licensesController', function($scope) {
      $scope.countries = [{locale:'en-US',name:'United States'}, {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]
      });
  
  })();
  </code></pre>
  
  <p>The code is cut for the example and may contain some errors. What should I call to execute my functions at host page?</p>
  
  <p>Yes, I started to read tutorials, but i couldn't find anything about tampermonkey and angularJS.</p>
  
  <p><strong>Edit1:</strong></p>
  
  <pre><code>$("#sell_offers").after('&lt;div ng-controller="MyController"&gt; Hello {{greetMe}}! &lt;/div&gt;'); 
  angular.module('myApp', []) 
      .controller('MyController', [
          '$scope', function ($scope) {
               $scope.greetMe = 'World';
          }
      ]);
      angular.element(function() { 
          angular.bootstrap(document, ['myApp']);
      });
  })();
  </code></pre>
  
  <p>Still not working. angular.min.1488804924.js:6 Uncaught Error: [ng:btstrpd] <a href="http://errors.angularjs.org/1.6.2/ng/btstrpd?p0=%26lt%3Bdiv%20id%3D%22myApp%22%26gt%3B" rel="nofollow noreferrer">http://errors.angularjs.org/1.6.2/ng/btstrpd?p0=%26lt%3Bdiv%20id%3D%22myApp%22%26gt%3B</a></p>
  
  <p><strong>Edit2:</strong></p>
  
  <p>Neither</p>
  
  <pre><code>var $ = jQuery;
  var ErpkApp = unsafeWindow.ErpkApp;
  
  function AddStyle(t) {
      $("head").append("&lt;style&gt;" + t + "&lt;/style&gt;");
  }
  
  (function() {
      'use strict';
      $("#sell_offers").after('&lt;div id="myTest" ng-controller="MyController"&gt; Hello {{greetMe}}! &lt;/div&gt;');
      ErpkApp.controller('MyController', [
          '$scope', function ($scope) {
              $scope.greetMe = 'World';
          }
      ]);
  })();
  </code></pre>
  
  <p><em>I used mainpage's ErpkApp because <code>&lt;html ng-app="ErpkApp" lang="en"&gt;</code></em></p>
  
  <p>nor</p>
  
  <pre><code>var $ = jQuery;
  
  function AddStyle(t) {
      $("head").append("&lt;style&gt;" + t + "&lt;/style&gt;");
  }
  
  (function() {
      'use strict';
      $("#sell_offers").after('&lt;div id="myTest" ng-controller="MyController"&gt; Hello {{greetMe}}! &lt;/div&gt;');
      var app = angular.module('ErpkApp', []);
  
      app.controller('MyController', [
          '$scope', function ($scope) {
              $scope.greetMe = 'World';
          }
      ]);
  })();
  </code></pre>
  
  <p>works.</p>
  
  <p><strong>Edit3:</strong> </p>
  
  <pre><code>var $ = jQuery;
  
  function AddStyle(t) {
      $("head").append("&lt;style&gt;" + t + "&lt;/style&gt;");
  }
  
  (function() {
      'use strict';
      $("#sell_offers").after('&lt;div id="myTest"&gt;&lt;div ng-controller="MyController"&gt; Hello {{greetMe}}! &lt;/div&gt;&lt;/div&gt;');
      var app = angular.module('myApp', []);
  
      app.controller('MyController', [
          '$scope', function ($scope) {
              $scope.greetMe = 'World';
          }
      ]);
  
      angular.bootstrap($('#myTest'), ['myApp']);
  })();
  </code></pre>
  
  <ul>
  <li><code>userscript.html?id=bbb54573-b5ea-43c3-84eb-119847f9176d:4 ERROR: Execution of script 'game Inventory extras' failed! [ng:btstrpd] http://errors.angularjs.org/1.6.2/ng/btstrpd?p0=%26lt%3Bdiv%20id%3D%22myTest%22%26gt%3B</code></li>
  </ul>
  
  <p>I think I have to give up. I read that angular don't allow nesting apps. In the main page <code>html</code> is already bootstrapped, so I can't attach any new app below. </p>