Show an image partially in a circular progress area


#1

I have an image as shown below. I want to show the image visible only certain part of it, based on some input value in AngularJS/Ionic. If the input value is 0 then we only have to show the black mask on it. If the value is 50, then we can show half of the image on the right side and half back background on the left side. So basically the image visible part should be based on the input value.

I have tried with a few circular progress bars like https://github.com/crisbeto/angular-svg-round-progressbar and https://github.com/mathewbyrne/angular-progress-arc and also with some CSS, but it was not working properly. Can some one help me on this.