title: Angular directive function param camel case not working
body: <p>I have an Angular 1.5.8 directive with isolated scope and two functions being passed in.  I have found that when the names of these functions are all lower case that they work correctly but if they are camelCased then they do not work.</p>
  
  <p>Note that I am talking about the value of the param not the param name itself.  here's the html that uses the directive:</p>
  
  <pre><code>&lt;buttons-radio model="contactInformationAcceptable" disabled="approved" callback="personalapprovalfieldchanged()" focus="focuscallback($event)"&gt;&lt;/buttons-radio&gt;
  </code></pre>
  
  <p>Note the case of the callback and focus values.  If I change these to camel case (and change the function definitions in the parent scope) then they don't work.</p>
  
  <p>Here is the directive:</p>
  
  <pre><code>angular.module("manageApp").directive('buttonsRadio', ['$timeout', function ($timeout) {
      return {
          restrict: 'E',
          scope: {
              model: '=',
              disabled: '=',
              callback: '&amp;',
              focus: '&amp;'
          },
          template: '&lt;div class="form-group yesorno"&gt; ' +
              '   &lt;div class="col-xs-12"&gt;' +
              '      &lt;button type="button" class="btn btn-success" ng-disabled="disabled" ng-class="{active: yesValue}" ng-click="clickYes()" ng-focus="localFocus($event)"&gt;Yes&lt;/button&gt;' +
              '      &lt;button type="button" class="btn btn-danger" ng-disabled="disabled" ng-class="{active: noValue}" ng-click="clickNo()" ng-focus="localFocus($event)"&gt;No&lt;/button&gt;' +
              '   &lt;/div&gt;' +
              '&lt;/div&gt;',
          controller: function ($scope) {
              $scope.$watch('model', function (value) {
                  if (value) {
                      if (value == 0) {
                          $scope.yesValue = false;
                          $scope.noValue = false;
                      }
                      if (value == 1) {
                          $scope.yesValue = true;
                          $scope.noValue = false;
                      }
                      if (value == 2) {
                          $scope.yesValue = false;
                          $scope.noValue = true;
                      }
                  }
              });
              $scope.localFocus = function ($event) {
                  $scope.focus({ $event: $event });
              }
              $scope.performCallback = function () {
                  $timeout(function () {
                      $scope.callback();
                  });
              }
              $scope.yesValue = false;
              $scope.noValue = false;
              $scope.clickYes = function () {
                  $scope.yesValue = !$scope.yesValue;
                  if ($scope.yesValue) {
                      $scope.noValue = false;
                      $scope.model = 1;
                  } else {
                      $scope.model = 0;
                  }
                  $scope.performCallback();
              }
              $scope.clickNo = function () {
                  $scope.noValue = !$scope.noValue;
                  if ($scope.noValue) {
                      $scope.yesValue = false;
                      $scope.model = 2;
                  } else {
                      $scope.model = 0;
                  }
                  $scope.performCallback();
              }
          }
      }
  }]);
  </code></pre>
  
  <p>Edit: Here is the parent controller that has the function I need to use:</p>
  
  <pre><code>angular.module("manageApp").controller('approvalPersonalController', ['$scope', '$http',
  function ($scope, $http) {
  
      //personalApprovalFieldChanged    personalapprovalfieldchanged
      $scope.personalapprovalfieldchanged = function () {
          //a field has changed so save them all
          console.log('field has changed - do something');
      };
  
  }]);
  </code></pre>
  
  <p>I am confused as to why this is as I have been through a Pluralsight course on directives and the camel case works OK in the plunks that I have created from the course but not in this real world example.</p>
  
  <p>It does work (calls the correct functions at the correct times) but I would like to use camel case for the function names if possible.</p>
  
  <p>Thanks</p>