使用AngularJS控制器作为内容脚本？

Question

我正在当前标签中注入文件modal.html。现在，此文件包含ng attributes和ng-model中的ng-controller。现在我使用我的控制器作为内容脚本，在这个控制器内我有一个chrome.runtime.onMessage.addListener()。这是我的文件：

的manifest.json

{
  "name": " Extension 1",
  "version": "0.1",
  "description": "Sample",
  "icons": { "16": "icons/icon16.png",
             "48": "icons/icon48.png",
            "128": "icons/icon128.png" },
    "background": {
    "scripts": [
                "lib/jquery/jquery.min.js",
                 "background/bg.js"
               ]
  },
  "content_scripts": [
    {
      "matches": ["https://mail.google.com/*"],
      "css":["lib/bootstrap/dist/css/bootstrap.css","css/modal.css"],
      "js": [ "lib/jquery/jquery.min.js",
              "lib/bootstrap/dist/js/bootstrap.min.js",
              "lib/angular/angular.min.js",
               "content/insertModal.js",
              "js/app.js",
              "js/appController.js"
             ]
    }
  ],
   "web_accessible_resources": [
    "modal.html"
  ],

  "permissions": ["contextMenus", "tabs","identity","https://accounts.google.com/"],


    "manifest_version": 2
}

内容/ insertModal.js

$(document).ready(function(){

    $.get(chrome.extension.getURL('modal.html'), function(data) {

      $(data).appendTo('body');

  });
});

modal.html

  <div ng-app="myapp" ng-controller="mainCtrl" class="modal fade" id="addTaskModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">

        <div class="modal-header">

          <h4 class="modal-title"></h4>
        </div>
        <div class="modal-body">
                   <select  ng-options="group.name for group in groups"  ng-model="group.selectedGroup" class="form-control selectbasic">
                      <option value="">Select group</option>
                    </select>
          <div>                     
              <textarea class="form-control" id="taskDescription" ng-model="taskName" name="textarea"></textarea>
          </div>
        </div>
        <div class="modal-footer">
          <button class="btn btn-success">Add</button>
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

app.js

 var app = angular.module("myapp" ,[]);

appController.js

app.controller("mainCtrl",function($scope){
         console.log("In controller");
            chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){
            // Listening to messages from background script
            });



  });

现在问题是console.log("In controller")中的appController.js未被调用。此外，当我按f12并转到内容脚本时，我看不到js/app.js。