angularjs - Angular 2 way binding doesn't work with template even though I'm not using primatives -

i can't figure out what's wrong code. i'm following example of fiddle in order bind 2 inputs. i'm trying little more involved- i'd load template based on attribute passed directive. can't figure out what's wrong on here.

this html

<!-- template --> <script type="text/ng-template" id="x-template.html"> <button ng-click='clickme()'><b>check model</b></button> directive: <input ng-model="this.test"></input> </script>   <div ng-controller="myctrl">     <my-directive type="x"></my-directive>     no directive:<input ng-model="this.test"></input>     {{this.test}} </div> 

and js:

var app = angular.module('myapp',[]);  function myctrl($scope) {      $scope.this= {test : "asdf"};      $scope.clickme = function() {         alert($scope.this.test);     } }  app.directive('mydirective', function() {     return {         restrict: 'e',         compile: function(element, attrs) {             element.append('<div ng-include="\'' + attrs.type + '-template.html\'"></div>');         }     } }); 

the issue trying use this, reserved keyword in javascript, property name.

try using different property name. changed example use foo in link below.

http://jsfiddle.net/01h3ne4y/