title: Angular.js ajax and apply not working
body: <p>I'm trying to do my first attempts with angular.js and I have a problem with restoring the correct content of the website. Content of pages is received via AJAX (now from static data, latter from database). When I place a block with directive ng-repeat inside element with id="content", everything works OK. Result is:</p>
  
  <p><strong>ID: 1 Name: Apple
  ID: 2 Name: Microsoft</strong></p>
  
  <p>But if I put the element inside the content dynamically using javascript and AJAX, I can not display the correct data. Result is:</p>
  
  <p><strong>ID: {{firm.id}} Name: {{firm.name}}</strong></p>
  
  <p>I tried to use the setTimeout() for subsequent calling $apply(), but it did not help. I tried to find a solution on the web, but I could not find a similar example. Does anyone know where can be the problem? Thank you very much for your help.</p>
  
  <p>Html code:</p>
  
  <pre><code>&lt;div ng-app="myApp"&gt;
    &lt;div id="main_controler" ng-controller="mainController"&gt;
      &lt;button onclick="get_page('1')"&gt;Page one&lt;/button&gt;
      &lt;button onclick="get_page('2')"&gt;Page two&lt;/button&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
  
      &lt;div id="content"&gt;
        &lt;div ng-repeat="firm in data.firms"  style="width:100%"&gt;
          ID: {{firm.id}} Name: {{firm.name}}
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript code:</p>
  
  <pre><code>var app = angular.module('myApp', []);
  
  app.controller('mainController', function($scope, $http) {
  
    $scope.get = function(a_number) {
      var p_url = 'ajax_fce.php?num=' + a_number;
  
      $http({
        method: 'JSON',
        url: p_url
      }).success(function(data, status) {
         $scope.data = data;
      }).error(function(data, status) {
        alert('Error');
      });
    }
    $scope.get(1);
  });
  
  
  get_template_1 = function() { 
    return '&lt;div ng-repeat="firm in data.firms"  style="width:100%"&gt;'+
             'ID: {{firm.id}} Name: {{firm.name}}'+
           '&lt;/div&gt; ';
  }
  
  get_template_2 = function() { 
    return '&lt;div ng-repeat="person in data.persons"  style="width:100%"&gt;'+
             'Name: {{person.name}} Surname: {{person.surname}}'+
           '&lt;/div&gt; ';
  }
  
  load_template = function(page_id) {
    var p_template =  '';
  
    if(page_id == 1) { p_template =  get_template_1(); }
    if(page_id == 2) { p_template =  get_template_2(); }
  
    return p_template;
  }
  
  
  get_page = function(page_id) {
    $('#content').html(load_template(page_id));
    angular.element(document.getElementById('main_controler')).scope().get(page_id);
    angular.element(document.getElementById('main_controler')).scope().$apply();
  }
  </code></pre>
  
  <p>PHP code (AJAX):</p>
  
  <pre><code>$p_return =  ''; 
  if ($_GET['num'] == '1') {
     $p_return = '   { "firms": [ { "id": "1", "name": "Apple" },
                      { "id": "2", "name": "Microsoft" } ]}'; }    
   else if ($_GET['num'] == '2') {
     $p_return = '   { "persons": [ { "name": "Steve", "surname": "Jobs" },
                      { "name": "Bill", "surname": "Gates" } ]}';
  }
  echo $p_return;
  </code></pre>