How to upload image to an existing image src in angularjs, css - css

Question

I have a table and have a upload picture. I also have a picture that is already displayed. What I want to do is when I upload a new picture it will overwrite the already displayed picture. In my fiddle I have a duck pic and when I upload new pic it display as another image. How can I hide the duck pic when the user upload new pic?
Link in my fiddle: http://jsfiddle.net/DharkRoses/m2qagzzk/6/
sample code:
angular.module('test', []);
angular.module('test').controller('UploadCtrl', function ($scope, $timeout) {
$scope.thumbnail = {
dataUrl: []
};
$scope.fileReaderSupported = window.FileReader != null;
$scope.photoChanged = function (files, index) {
if (files != null) {
var file = files[0];
var index = this.$index;
if ($scope.fileReaderSupported && file.type.indexOf('image') > -1) {
$timeout(function () {
var fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onload = function (e) {
$timeout(function () {
$scope.thumbnail[index] = {dataUrl: e.target.result};
});
}

Answer 1

Use this code:: demo
<img ng-if="!thumbnail[$index].dataUrl"ng-src="http://s13.postimg.org/w0v662g93/pink_04.png" height="50px" />

Answer 2

AngularJS views support binary operators
condition && true || false
You can use ng-src with conditions:
<img ng-src="{{thumbnail[$index].dataUrl.length !== 0 && thumbnail[$index].dataUrl || 'http://s13.postimg.org/w0v662g93/pink_04.png'}}" height="50px" />
HTML:
<tr ng-repeat="i in [1, 2, 3, 4]">
<td>{{i}}</td>
<td>
<input type="file" name="file" onchange="angular.element(this).scope().photoChanged(this.files)" /> </td>
<td>
<img ng-src="{{thumbnail[$index].dataUrl.length !== 0 && thumbnail[$index].dataUrl || 'http://s13.postimg.org/w0v662g93/pink_04.png'}}" height="50px" />
</td>
</tr>
fiddle