image preview directives using angularjs

I would like to have image preview upload with trigger another element, so that I have put together in directives.

https://stackoverflow.com/a/25674293

AngularJS Image Preview before Upload showing previous image selected

it is so confusing to me.

How can I make directives image preview uploading by clicking image? I try it put together but it fails,

https://jsfiddle.net/tictac18g/83m659zL/4/

    .directive('fileButton', function ($parse) {
    return {
        restrict: 'AE',
        link: function (scope, element, attrs) {

            scope.setimage = function () {
                var file = scope.myFile;
                var reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = function (e) {
                    scope.$apply(function () {
                        scope.ImageSrc = e.target.result;
                    })
                }
            }

            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            element.bind('change', function (e) {
                scope.$apply(function (e) {
                    modelSetter(scope, element[0].files[0]);
                });
                scope.setimage();
            });
        },

        compile: function (element) {
            var fileInput = angular.element('<input type="file" file-model="myFile" multiple />')
            fileInput.css({
                position: 'absolute',
                top: 0,
                left: 0,
                'z-index': '2',
                width: '100%',
                height: '100%',
                opacity: '0',
                cursor: 'pointer'
            });
            element.append(fileInput)
            return this.link;
        }

    }
})

<div ng-app="myApp" ng-controller="myCtrl">
    <div ng-init="ImageSrc ='https://www.google.com/images/srpr/logo3w.png'" file-button>
        <img width="200" ng-src="{{ImageSrc}}" />
    </div>
</div>

Thanks in advance.

update: I have put two separate directives, it seems work, however I can't can't figure out to make one directive.

here is my result, https://jsfiddle.net/tictac18g/4y0seej9/

but the result doesn't match what I'm looking for, because the size of uploaded image couldn't be restraint.

and it doesn't quite the same result as the jquery, http://jsfiddle.net/rodolphobrock/q8f33f8L/

would you give me some advise, it can't be achieve the same features in angularjs?

update 2: I can't get it work with native directives, so I have applied it with JQuery plugins.

my result is that. https://fiddle.jshell.net/tictac18g/83m659zL/