使用文件上载指令绑定动态进度条

Question

如何将进度条与文件上传指令绑定.Below是我到目前为止所尝试的代码.Below是小提琴的链接。 https://jsfiddle.net/4d0e31hd/5/

<div>
    <label class="btn btn-success">File Upload
    <input type="file" file-upload></label>
</div>
<div class="progress">
   <div id="dynamic" class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
    <span id="current-progress"></span>
   </div>
</div>


 //directive
 app.directive('fileUpload', function () {
 return {
 scope:{
    fileUpload: "="  
 }      
 link: function (scope, el, attrs) {
    el.bind('change', function (event) {
        var files = event.target.files[0];
        scope.$emit("fileSelected", { file: files[0] });
        }                                       
    });
  }
};
});
In the progress bar i should display the each record by Total number of 
records something like 10 out of 200 processed reading.