title: ReferenceError: Excel is not defined
body: <p>I want to make an Office add-in with angularjs and angularjs-ui-router:</p>
  
  <pre><code>&lt;bt:Urls&gt;
      &lt;bt:Url id="Contoso.Taskpane3.Url" DefaultValue="https://localhost:3000/addin/test" /&gt;            
  &lt;/bt:Urls&gt;
  </code></pre>
  
  <p>The name of the module is <code>app</code>, and the router is as follows:</p>
  
  <pre><code>.state('addinTest', {
      url: '/addin/test',
      tempalte: 'abc',
      controller: 'TestCtrl',
      resolve: {
          loadMyCtrl: ['$ocLazyLoad', function ($ocLazyLoad) {
              return $ocLazyLoad.load('https://appsforoffice.microsoft.com/lib/1/hosted/office.js');
          }],
          initOffice: ['loadMyCtrl', function (loadMyCtrl) {
              Office.initialize = function (reason) {
                  $(document).ready(function () {
                      angular.element(document).ready(function () {
                          angular.bootstrap(document, ['app'])
                      })
                  });
              }
              return Promise.resolve(null)
          }]
      }
  })
  </code></pre>
  
  <p>And the controller:</p>
  
  <pre><code>app.controller('TestCtrl', [function () {
      function loadDataAndCreateChart() {
          Excel.run(function (ctx) {
              var sheet = ctx.workbook.worksheets.getActiveWorksheet();
              sheet.getRange("A1").values = "Quarterly Sales Report";
              return ctx.sync()
          })
      }
      loadDataAndCreateChart()
  }])
  </code></pre>
  
  <p>I would expect that loading the add-in writes <code>Quarterly Sales Report</code> to <code>A1</code>. However, I got the following error:</p>
  
  <pre><code>ReferenceError: Excel is not defined at loadDataAndCreateChart
  </code></pre>
  
  <p>Does anyone know what's wrong? Is it OK to initialize Office and use <code>angular.bootstrap</code> like that?</p>