JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app="app">
<div ng-controller="imgCtrl">
<input ng-model="imageSource" type="file" onchange="angular.element(this).scope().fileNameChaged(this)"></input>
<img ng-src="{|imageSource|}"></img>
</div>
</div>
JavaScript
var app = angular.module('app',[]).config(function($interpolateProvider){
$interpolateProvider.startSymbol('{|');
$interpolateProvider.endSymbol('|}');
}
);
app.controller('imgCtrl', function($scope, $http)
{
$scope.imageSource = "";
$scope.fileNameChaged = function(element)
{
var reader = new FileReader();
reader.onload = function (e) {
$scope.$apply(function()
{
$scope.imageSource = e.target.result;
});
}
reader.readAsDataURL(element.files[0]);
}
});