title: AngularJS Php file with angular in it not working after $http
body: <p>I have a php file with a bunch of angular stuff in it and it works fine when I include it directly, however once I include that php file via $http like this:</p>
  
  <pre><code>$http.get('include/step'+step+'.php').
  success(function(data, status, headers, config) {
      $("#tab_"+step).html(data);
  });
  </code></pre>
  
  <p>It stops working, then I can see stuff like: {{category.title}} etc being shows as text rather than it fetching its value.</p>
  
  <p>I'm starting out with angular and I'm trying to just make angular recognise the code that gets added via an ajax response or just a $http response.</p>
  
  <p>I also tried doing</p>
  
  <p>but I got this angular.bootstrap(data);</p>
  
  <pre><code>Error: [ng:areq] Argument 'eventCatCtrl' is not a function, got undefined
  </code></pre>
  
  <p>eventCatCtrl was the first of my controllers in that file that was generated via $http.</p>
  
  <p>I also did this angular.bootstrap(data, ['eventApp']); eventApp was the name of my main module.
  Just for info all this http stuff is being done inside a div and I've defined my module on body, if it matters.</p>
  
  <p><strong>On the request of more code:</strong></p>
  
  <p>Function is triggered from this:</p>
  
  <pre><code>&lt;div class="form-group progress-tracker__buttons" ng-controller="StepChange"&gt;
      &lt;input type="button" class="btn btn-primary btn-save" value="Save"&gt;
      &lt;input type="button" class="btn btn-default btn-next disabled" value="Next" ng-click="changeStep($event)"&gt;
      &lt;div class="last-saved"&gt;Last saved: Not saved yet&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's my module, controller and function:</p>
  
  <pre><code>var eventApp = angular.module('eventApp', []);
  
  eventApp.controller('StepChange', function($scope, $http){
      $scope.changeStep = function($event){
          $http.get('include/step2.php').
          success(function(data, status, headers, config) {
              $("#tab_2").html(data);
          });
      };
  });
  </code></pre>
  
  <p>In my step2.php file I have this portion:</p>
  
  <pre><code>&lt;div class="panel-group form-group sortable" id="catAccordion" ng-controller="eventCatCtrl"&gt;
      &lt;div ng-repeat="category in categories.list"&gt;
          &lt;p&gt;{{category.title}}&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have a factory as such:</p>
  
  <pre><code>eventApp.factory('EventCategories', function () {
      var EventCategories = {};
      EventCategories.list = [
          {
              name: "Robert Downey Jr.",
              character: "Tony Stark / Iron Man"
          },
          {
              name: "Chris Evans",
              character: "Steve Rogers / Captain America"
          }
      ];
      return EventCategories;
  });
  </code></pre>
  
  <p>And I have a controller like this for that factory:</p>
  
  <pre><code>eventApp.controller("eventCatCtrl", function($scope, EventCategories){
      $scope.categories = EventCategories;
  });
  </code></pre>