form data upload using directive using angularjs and mvc web api

I have got this mark up with angularjs code to upload a file with some fields but cant really point out is that any time the $scope.f changes the directive doesnt work.Html code

       <form> <input type="file" file-model="f.file" ></input>

        <button type="submit" class="btn btn-danger" ng-click="submit()">Upload</button>
       </form>

app.directive('fileModel', ['$parse', function ($parse) { return { restrrict: 'A', link: function (scope, element, attrs) { var model = $parse(attrs.fileModel); var modelSetter = model.assign; element.bind('change', function () { scope.$apply(function () { modelSetter(scope, element[0].files[0]); }) }) } } }])

    app.service('uploader', ['$http', function ($http) {
        this.post = function (uploadUrl, data) {
            var fd = new FormData();
            for (var key in data)
                fd.append(key, data[key]);
            $http.post(uploadUrl.fd, {
                transformRequest: angular.identity,
                headers: { 'Content-Type': undefined }
            })
        }
    }])
    app.controller('fileManagerController', ['$scope', 'fileLoadService', '$http', 'uploader',  function ($scope, fileLoadService, $http, uploader) {

        $scope.f = {};
        $scope.f.Id = 2;
        $scope.f.tr = 'hi';
        $scope.submit = function () {
            var uploadUrl = 'https://angular-file-upload-cors-srv.appspot.com/upload';
            uploader.post(uploadUrl, $scope.f);
        }

Basically when the $scope.f.file changes when user click the file right ? the directive doesnt seem to work and the error looks like this when upload button is hit