AngularJs - directives do not work via ajax

I have a page: index.php and app.js . on my app I make a load to main.php which is the initial loading of the site. within main it will get select , div with ng-repeat , ng-source , etc.

But when main content was part of index it worked normal, but now it just does not work anymore loads the page, plus the directives: ng-repeat , ng-source , etc do not seem to work. I'll go through a snippet of code for you to see

app.js

var app = angular.module("MeuApp", []);
app.controller("MeuAppCtrl", function($scope, $http) {
$scope.msg = "Olá Usuários";
var carregarMain = function() {
    $http.get("http://localhost/main.php").success(function(data, status) {

        $("#mainPage").html(data);
        carregarBanner();
    });
};
var carregarBanner = function() {
    $http.get("http://localhost/banner.php").success(function(data, status) 

{
            $scope.banners = data;
            alert(data[0].foto);
        });
    };
    carregarMain();
});

index.php

<div id="mainPage"></div>

main.php

<div ng-repeat="banner in banners">
  {{banner.foto}}
  <div class="item">
    <img ng-src="{{banner.foto}}" style="height: 600px;" alt="">
  </div>
</div>