Q:

Bind method inside a directive

Here is my Angular code for a custom directive which creates some divs: 
function footerDirective($compile){
     return { 
         link: function(scope,elements,attributes){

             function createDiv(content,cname,callback){
                var new_div=document.createElement("div"); 
                new_div.setAttribute("ng-click", callback);
                $compile(new_div)(scope);
                new_div.innerHTML=content;
                new_div.className=cname;
                elements[0].appendChild(new_div); 
             }

     for (var i=0;i<5;i++) {
       createDiv(i,"class-numbers","gallery.clickPage()");
     }
}}}

where  gallery.clickPage is a Controller method. The above works fine. However, I want to pass i as argument inside gallery.clickPage, something like:
gallery.clickPage.bind(this,i)

If I pass the latter as argument inside of createDiv it does not work. In which way may I achieve my goal?

A:

Correct way is to have in template 
<div ng-repeat="mydiv in mydivs" ng-click="gallery.clickPage($index)">{{mydiv.content}}</div>
And in directive:
scope.mydivs = [{content : 1}, {content : 2}, ...]

Now, answer to your question: your i is phantom - it does not exist when you see page, it existed only when page was being created by angular. So you cant pass it. You can thow pass like this:
createDiv(i,"class-numbers","gallery.clickPage(" + i + ")");
Or you can put i values to scope:
scope.myVars = [1, 2, 3, 4, 5]
createDiv(i,"class-numbers","gallery.clickPage(myVars[" + i + "])");
Final notice is that if you want to create angular element, you just can:
angular.element('<div ng-click="someF()">{{anything}}</div>'), then compile and append to parent.

