AngularJs- Failed to create module

Before the problem: We are trying to do the following:

I'll give a script tag and a javascript piece for a different domain. This will be a kind of widget project. When another site puts my javascript on their site, my javascript will load and inject the html widget.

Widget html is built with Angular and it works great when I call this html directly, but it doesn't work when I type in another page.

Here's the code.

This is how I inject the html widget:

var widget = {
    initialize : function(containerId)
    {

        $("#" + containerId).load("widget.html");

    }
}   

      

        
        
        
      

    

My html widget

  <script src="http://localhost:8000/bower_components/angular/angular.js"></script>
<script src="../Controllers/phoneController.js"></script>


<div ng-app="phonecatApp">
      <ul ng-controller="PhoneListCtrl">
    <li ng-repeat="phone in phones">
      <span>{{phone.name}}</span>
      <p>{{phone.snippet}}</p>
      {{2+2}}
    </li>
  </ul>


</div>


</div>

      

        
        
        
      

    

A and my controller:

var phonecatApp = angular.module('phonecatApp', []);

phonecatApp.controller('PhoneListCtrl', function ($scope) {
  $scope.phones = [
    {'name': 'Nexus S',
     'snippet': 'Fast just got faster with Nexus S.'},
    {'name': 'Motorola XOOM™ with Wi-Fi',
     'snippet': 'The Next, Next Generation tablet.'},
    {'name': 'MOTOROLA XOOM™',
     'snippet': 'The Next, Next Generation tablet.'}
  ];
});

      

        
        
        
      

    

Exception in console:

Unprepared error: [$ injector: modulerr] Failed to instantiate the phonecatApp module due to: Error: [$ injector: nomod] The phonecatApp module is not available! You either misspelled the module name or forgot to load It. If registering the module ensures that you specify the dependencies as the second argument.

Edit: There is {{2 + 2}} code in my html to test Angular. It is not evaluated by Angular and is printed in html as is.