AngularJS: dynamically loaded component not showing

Question

I have inherited a project which uses a mix of AngularJS and JQuery. I am currently having issues with a dynamically loaded md-switch directive not displaying when it is loaded dynamically. Please see the following:

In my view, I have

...
<md-switch class="md-primary md-switch-custom-margin" aria-label="Done Switch" ng-model="done"
          ng-change="markDone($event, @Newtonsoft.Json.JsonConvert.SerializeObject(!Model.Done))" />
...

On first page load, this control shows just fine. However on button click, I go retrieve a fresh partial view for the container that the md-switch lives in via ajax like so:

 $.ajax({
  url: "../../MyController/GetPartial",
  type: "GET",
  dataType: "html"
}).done(function (response) {
  $("#body-container").html(response);

  var angularScope = angular.element("div[ng-controller='MyAngularController'").scope();

  //have tried both of the following
  //angularScope.$apply();

})

When the partial view is loaded into the page, all of my md-switchs on the page are not visible although they do appear on the DOM and seem to be formatted just the same as before any action occurs.

After reviewing numerous posts, I'm still not sure what I'm missing here. All help is appreciated.

Answer 1

I've found a solution to my problem using $compile as follows in my jquery script:

the done callback of my ajax request:

       .done(function (response) {

          //have angular recompile it's dom directives such as md-switch
          angular.element(document.body).injector().invoke(function ($compile) {
            var container = $("#body-container");
            var scope = container.scope();
            container.html(response);
            $compile(container.contents())(scope);
          })
        }