Controller scope inside Directive with Angular
Now I'm using a function name defined inside ShopController in the Reclaim Directive... it seems like a bad practice.


Yep, this kind of code will be hard to debug and maintain.


You're depending on the existence of reclaim to be somewhere in the scope chain, on some controller enclosing your directive.
There's no indication whenever you use the directive that reclaim is missing in the scope. The directive will fail only if you click it.
Without proper tools like Batarang, in a highly nested controller structure, reclaim will be hard to find when you don't know which controller it resides.


If &lt;reclaim-directive&gt; isn't that huge, and is not used anywhere else independently, then it's contents should belong to &lt;prize-directive&gt;.

If &lt;reclaim-directive&gt; is big and independent enough to be a separate directive, then consider making it a sibling of &lt;reclaim-directive&gt;. That way, you avoid the extra nested level:

&lt;div ng-controller="ShopController as shop"&gt;                
  &lt;prize-directive ng-repeat="prize in prizes"&gt;&lt;/prize-directive&gt;
  &lt;reclaim-directive&gt;&lt;/reclaim-directive&gt;
&lt;/div&gt;


Most importantly, instead of depending on implicit existence of reclaim in the scope, why not provide it to the directive explicitly? Construct a scope for the directive, which accepts a binding of reclaim. I believe this is the way to do it:

&lt;prize-directive ng-repeat="prize in prizes" on-reclaim="reclaim"&gt;&lt;/prize-directive&gt;

angular.module('app.directives').directive('prizeDirective', function () {
  return {
    restrict: 'E',
    templateUrl: 'js/directives/PrizeDirective.html',
    scope: {
      onReclaim: '='
    }
  };
});

&lt;!-- onReclaim assigned to on-reclaim comes from the prizeDirective --&gt;
&lt;reclaim-directive on-reclaim="onReclaim"&gt;&lt;/reclaim-directive&gt;

angular.module('app.directives').directive('reclaimDirective', function () {
  return {    
    restrict: 'E',
    template: '&lt;button ng-click="onReclaim(prize)"&gt;Resgatar&lt;/button&gt;',
    scope: {
      onReclaim: '='
    }
  };
});