<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script>
    var app = angular.module('myApp', []);
    
    var url = "";
    
    app.controller('myCtrl', function ($scope, $http, $q) {
        $scope.uploadFile = function () {
            var f = document.getElementById('file').files[0];
            console.log(f);
        }
    });

    app.directive('customFileInput', [function () {
        return {
            restrict: "EA",
            scope: false,
            link: function ($scope, element, attrs) {
                element.on('change', function (evt) {
                    var files = evt.target.files;
                    var filename = files[0].name;
                    alert(URL.createObjectURL(files[0]));
                    });
            }
        }
    }]);
</script>

<div ng-app="myApp" ng-controller="myCtrl">
    <input id="file"
           type="file"
           ng-model="mdfile"
           class="form-control"
           custom-directive custom-file-input />
    <button ng-click="uploadFile()">upload me</button>
</div>

/* Styles go here */