javascriptjqueryhtmlangularjsng-bind

How to bind angular.js data to imported html?

I have imported an external local html file (index2.html) into my html file's div (index.html, #container). I want to use angular to bind data values to some of the tags in the imported html file. Here's my code so far - http://plnkr.co/edit/APXdpQzRUOfGehqSAJ9l?p=preview

index.html

<div id="container" ng-app="myApp" ng-controller="myController"></div>

<script type="text/javascript">
  $(function() {
    $("#container").load("index2.html");
  });

  var app = angular.module('myApp', []);
  app.controller('myController', function($scope) {
    $scope.name = "test";
  });     
</script>

index2.html

<div id="container2">
 <p>test content:</p>
 <p>{{name}}</p>
</div>

However, it just shows up as the text {{name}} - not 'test'. I've tried placing 'ng-app' and 'ng-controller' in #container2 instead but it's still the same.

Solution

  • Mixing AngularJS and jQuery was asking for trouble!

    I found my answer - I used ng-include to import the html instead of the load function. 

    <div id="container" ng-include="'index2.html'" ng-app="myApp" ng- 
controller="myController"></div>