firefox sdk add-on using angularJs routing

Question

I've created a small chrome extension using angularJs with this structure

extension/
    statics/
         css/
         js/
           lib/
           app/
           api/
         img/
    views/ 
        partials/

all Js files containing angularJs functionality are in js/app folder, and all files related to chrome API are in js/api folder. in manifest json file

"default_popup": "popup.html#/popup"

helps me invoke controller of popup route. and I can change the route for options tab(in a new tab):

chrome.tabs.create({url: 'html/application.html#/welcome'});

I want to find out how to define a route for the popup in firefox so that I can reuse this structure to create firefox SDK add-on with. may you please show me how to?

Answer 1

I think I need to answer my own question.
the popup in extensions (firefox & chrome I read about in docs ) won't change the route until next time you click on extension browser action button to open it again, so you can't use multiple routes and multiple controllers. if you need a two way binding for the popup view in AngularJs, you need to do it by a single controller. so, the only working approach I found is to invoke the controller manually:

define a function to invoke the controller

app.invokeManually = function () {
  var $injector = angular.bootstrap(document, ['app']);       
  var $scope = angular.element('body').scope();
  $scope.$apply();
}

assuming the body as the control element. then call this function at the end of popup body.

Let me know if you have a better idea.