Cant open picture modal - angularjs

Question

Pop up of my modal is not appearing and page routed to some other page, didn't seen any problem in code, same code is running perfectly in other module. Just want when click on HTML code only picture modal open.
//controller Code
'use strict';
angular.module('employer-company').controller('EmployerProfileController', ['$scope','$http', 'Countries', 'Authentication','Employers', '$location','$modal',
function($scope,Countries,$http, Authentication, Employers, $location, $modal) {
$scope.user = Authentication.user;
$scope.countries = Countries.getCountries();
$scope.isEditing = false;
$scope.openPictureModal = function() {
var modalInstance;
modalInstance = $modal.open({
templateUrl: '/modules/employer-company/views/picture-partial.html',
controller: 'PictureModalCtrl',
});
modalInstance.result.then(function(result) {
$scope.employer.picture_url = result.picture_url;
}, function() {
});
};
}
]).controller('PictureModalCtrl', [
'$scope', '$modalInstance', '$upload', function($scope, $modalInstance, $upload) {
var convert = function convertDataURIToBlob(dataURI, mimetype) {
var BASE64_MARKER = ';base64,';
var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
var base64 = dataURI.substring(base64Index);
var raw = window.atob(base64);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
var bb = new Blob([uInt8Array.buffer], {type : mimetype});
return bb;
}
$scope.upload = function(image){
$scope.formData = convert(image.dataURL, image.type);
$scope.upload = $upload.upload({
url: '/uploadpicture', //upload.php script, node.js route, or servlet url
method: 'POST',
headers: {'Content-Type': 'undefined'},
data: {myObj: $scope.myModelObj},
file: $scope.formData, // or list of files ($files) for html5 only
}).progress(function(evt) {
console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
}).success(function(data, status, headers, config) {
$scope.response = data;
console.log(data);
$modalInstance.close({picture_url: data});
});
};
$scope.ok = function (action) {
$modalInstance.close({ action: action, picture_url: $scope.picture_url });
};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}
]);
//modal code
<div style="padding: 10px;">
<h2>Make sure you look good.</h2>
<div>
<span class="btn btn-default btn-file">
Browse
<input id="inputImage2"
type="file"
accept="image/*"
image="image2"
resize-max-height="300"
resize-max-width="250"
resize-quality="0.9" />
</span>
<hr />
<img width="250" ng-src="{{image2.resized.dataURL}}"/>
</div>
<br>
<div style="display: flex; align-items: center;">
<button class="btn btn-primary" ng-click="upload(image2.resized)">Upload</button>
<button class="btn btn-success" ng-click="cancel()">Cancel</button>
</div>
<hr />
</div>
// HTML code
<div class="col-md-3 text-center">
</i>
<img alt=""class="img180_180" src="{{employer.picture_url}}">
</div>