AngularJS 1.5 scope in directive ng-include -

here's code http://jsfiddle.net/miuosh/n6yppypj/ uploadfile directive. problem use this

  <input type="file" file-model="myfile" />   <button ng-click="uploadfile()">upload me</button> 

in ng-include="'views/uploadfileform.html'".

in directive add "myfile" scope. turns out angular create new scope myfile. add "myfile" "rootscope" need use

modelsetter(scope.$parent.$parent.$parent[..],element[0].files[0]) 

which inconvenient because need know how many parent scope have.

i have faced similar problem dealing file input angular. can create directive listen file change , call controller function file. here jsfiddle it.

var app = angular.module('app', []);  app.controller('yourctrl', function() {     $scope.image;     $scope.imagechanged= function (files) {         $scope.image = files;     }; });  app.directive('customonchange', function() {   return {     restrict: 'a',     link: function (scope, element, attrs) {       var onchangefunc = scope.$eval(attrs.customonchange);       element.bind('change', function(event){         var files = event.target.files;         onchangefunc(files);       });        element.bind('click', function(){         element.val('');       });     }   }; })  <input type="file" id="imginput" custom-on-change="imagechanged"/>