Angularjs Click event handling within link - angularjs

Question

I am trying to make a custom directive which would show different buttons based on attribute present. One of the button requires click event handler and I want to handle it within the directive as there will be multiple instances of this directive in same page. I tried the code below but to no avail.
'use strict';
angular
.module('test-template', [])
.directive('testTemplateBricks', [
'$compile',
'$timeout',
function($compile,$timeout) {
return {
restrict: 'A',
link: function($scope, iElm, iAttrs, controller) {
var el = "";
if(iAttrs.needImg=="true")
{
el += '<input type="file" style="display:none;" class="browse-file"/><button class="btn btn-info" ><span class="glyphicon glyphicon-picture" ng-click="browse()"></span></button>';
}
if(iAttrs.needTxt=="true")
{
el += ' <button class="btn btn-info"><span class="glyphicon glyphicon-pencil"></span></button>';
}
$compile(el)($scope);
iElm.append(el);
$scope.browse = function() { console.log("browsing");};
$timeout(function(){
iElm.on("click",function(e){
console.log("Browsing");
iElm.find("input[type=file]").click();
});
});
}
};
}
]);
EDIT: http://plnkr.co/edit/bNRLvWjEE7LLvhwRFIae?p=preview
In this sample I want to display the hidden file browser when the image button is clicked.

Answer 1

So I wouldn't recommend this approach to toggling the visibility of elements, it's something that's better handled in the template logic.
But to get you started I've taken your code and amended it somewhat (https://jsbin.com/negawu)
angular
.module('test-template', [])
.directive('testTemplateBricks', [
'$compile',
'$timeout',
function($compile,$timeout) {
return {
restrict: 'A',
template: '<input type="file" class="browse-file"/>' +
'<button class="btn btn-info" ng-show="showImage">' +
'<span class="glyphicon glyphicon-picture" ng-click="browse()"></span>' +
'</button>' +
'<button class="btn btn-info" ng-show="showText">' +
'<span class="glyphicon glyphicon-pencil"></span>' +
'</button>',
link: function($scope, iElm, iAttrs, controller) {
$scope.showImage = false;
$scope.showText = false;
if (iAttrs.needImg == "true") {
$scope.showImage = true;
}
if (iAttrs.needTxt == "true") {
$scope.showText = true;
}
$scope.browse = function() {
console.log("browsing");
};
}
};
}
]);