angularjs controller in PartialView not working

Question

I have a View which contains a link to call a PartialView.

<div data-ng-controller="MainController"> <a href="#" data-ng-click=callPartialView()"> Click here to see the details. </a> </div> <script> app.controller('MainController', ['$scope', 'HttpService', function($scope, HttpService) { $scope.callPartialView = function() { HttpService.getModal('/Controller/ShowModalMethod', {}); }; }]); </script> 

My HttpService service has a function that calls an action from the controller and returns a PartialView in order to show it.

getModal = function(url, params) { $http.get(url, params).then(function(result) { $('.modal').html(result); }); } 

The PartialView is showing perfectly. The problem occurs when I try to add a controller to that PartialView content.

<div class="wrapper" data-ng-controller="PartialViewController"> <span data-ng-bind="description"></span> </div> <script> alert('This alert is shown.'); app.controller('PartialViewController', ['$scope', 'HttpService', function($scope, HttpService) { $scope.description = "That's the content must have to appear in that bind above, but it isn't working properly."; }]); </script> 

The controller just don't work as expected. None I put inside the controller appears in that div above. What's happening? Thank you all!

Answer 1

Stop using jQuery...

The problem is that $('.modal').html(result); is only adding the HTML to something with a .modal class. What you need to do is to compile the template using AngularJS, something like:

app.factory('HttpService', function($document, $compile, $rootScope, $templateCache, $http) { var body = $document.find('body'); return { getModal: function (url, data) { // A new scope for the modal using the passed data var scope = $rootScope.$new(); angular.extend(scope, data); // Caching the template for future calls var template = $http.get(url, {cache: $templateCache}) .then(function (response) { // Wrapping the template with some extra markup var modal = angular.element([ '<div class="modal">', '<div class="bg"></div>', '<div class="win">', '<a href="#" class="icon cross"></a>', '<div>' + response.data + '</div>', '</div>', '</div>' ].join('')); // The important part $compile(modal)(scope); // Adding the modal to the body body.append(modal); // A close method scope.close = function () { modal.remove(); scope.destroy(); }; }); } }; }); 

Working example

http://jsfiddle.net/coma/6j66U/