title: Angular template and .NET Partial Postback
body: <p>I have a trouble to get angular working with .Net partial postbacks.</p>
  
  <p>Question is basically same to this : <a href="https://stackoverflow.com/questions/23371744/re-initialize-angular-bindings-after-partial-postback">Re-initialize Angular bindings after partial postback</a></p>
  
  <p>Basically I have a tab on which I have angular app, then I have second tab with some c# control, I have to do partial postback between tabs and when I am going back to my app, there is nothing.</p>
  
  <p>I have tried routing with ngView then I have tried <code>$route.reload()</code> (it goes to the controller and I can see that the template is being pulled down but the result on the page is none). Then I tried <code>compile(templateCache.get(lazyTableControllerRoute.current.templateUrl))(scope)</code> as mentioned <a href="https://github.com/angular/angular.js/issues/6280" rel="nofollow noreferrer">here</a>. Nothing.</p>
  
  <p>Please help :)</p>
  
  <p>After each postback I am putting on page this html :</p>
  
  <pre><code>LiteralControl lazyControl = new LiteralControl("&lt;div ng-app=\"LazyLoadingApp\" style=\"padding:10px\" ng-controller=\"LazyTableController\" ng-view&gt;&lt;lazy-table&gt; &lt;/lazy-table&gt;&lt;/div&gt;");
  Controls.Add(lazyControl);
  </code></pre>
  
  <p>And some config constants like <code>templateUrl</code>.</p>
  
  <p>Here is my code :</p>
  
  <pre><code>var app = angular.module('LazyLoadingApp', ['ui.bootstrap', 'ngRoute'], function ($interpolateProvider) {
      $interpolateProvider.startSymbol('[[');
      $interpolateProvider.endSymbol(']]');
  });
  
  app.config(function ($routeProvider, $locationProvider, tableTemplateUrl) {
      $routeProvider.when('/Page.Web.UI/sptl_project.aspx', {
          controller: 'LazyTableController',
          templateUrl: tableTemplateUrl,
      });
  
      // configure html5 to get links working on jsfiddle
      $locationProvider.html5Mode(true);
  });
  
  //**This objects I am using after partial postback to check in the console if e.g. $route.reload() works..**
  var lazyTableControllerRoute = null;
  var templateCache = null;
  var compile = null;
  var scope = null;
  
  app.directive('lazyTable', ['tableTemplateUrl',
  
      function (tableTemplateUrl) {
          return {
              name: 'lazyTable',
              priority: 0,
              restrict: 'E', // E = Element, A = Attribute, C = Class, M = Comment
              templateUrl: tableTemplateUrl
          };
      }
  ]).controller('LazyTableController', ['$scope', '$rootScope', 'lazyFactory', 'opsPerRequest', 'header', '$route', '$templateCache', '$compile',
  
      function ($scope, $rootScope, lazyFactory, opsPerRequest, header, $route, $templateCache, $compile) {
  
          lazyTableControllerRoute = $route;
          var loadingPromise = null;
          templateCache = $templateCache;
          compile = $compile;
          scope = $scope;
  
  (...) rest is not important 
  </code></pre>
  
  <p><strong>UPDATE:</strong></p>
  
  <p>I was trying with require.js.. (Again, it's working after full page load.) My idea was to bootstrap element after partial postback.
  I built simple test case that in Update Panel along with my app there is simple button, just making partial postback. After click (when app disappeared) I tried in console:</p>
  
  <pre><code>angular.bootstrap(document, ['LazyLoadingApp'])
  </code></pre>
  
  <p>But then I got error which I cannot remove:</p>
  
  <pre><code>App Already Bootstrapped with this Element 'document'
  </code></pre>
  
  <p>Here is <a href="http://plnkr.co/edit/SM6hYWubePLcfvgyeu0F?p=preview" rel="nofollow noreferrer">plunker</a> for app in require.js way (but please keep in mind that it's just for code review purpose..)</p>