Angular ng-click doesn't trigger the function in my directive

Question

I have a pretty large angular project, I'm using a lot of directives which all work fine. I followed a best practice guide which mentioned using controllerAs: vm (view model) instead of $scope .

This has worked fine throughout the project, however in one directive in particular, the vm doesn't seem to be callable within my partial.

Directive:

 (function() {
  "use strict";

  angular.module('bandzest.directive.create.release', [])
         .directive('createRelease', CreateRelease);

  function CreateRelease() {

    var directive = {
      link: link,
      restrict: 'E',
      templateUrl: './app/components/release/partial.create.release.html',
      controller: function(content, $cookies, $scope, $rootScope) {

        var vm = this;
        vm.save = save;

        vm.release = {         
          artist: $cookies.get('artistId')        
        };

        vm.files = [];
        vm.tracks = [];

        $scope.$on("fileSelected", function (event, args) { 
          $scope.$apply(function () {
            vm.files.push(args.file);
          });
        });

        function save() {

          $http({
            method: 'POST',
            url: api+"/api/v1/releases",
            headers: { 'Content-Type': undefined },
            transformRequest: function (data) {
            var formData = new FormData();

            formData.append("release", angular.toJson(data.release));

            for (var i = 0; i < data.files.length; i++) {
              formData.append("file" + i, data.files[i]);
            }

            return formData;
          },
            data: { release: $scope.release, files: vm.files },
            params: { user: $cookies.userId }
          }).success(function (data, status, headers, config) {
            console.log(data);
          }).error(function (data, status, headers, config) { 
            console.log(data);
          });
        }
      },
      controllerAs: 'vm',
      bindToController: true
    }

    return directive;

    function link() {

    }
  }
})();

Partial:

<div class="index-header">
    <ul>
      <li><a trigger-upload class="primary">+ Upload tracks</a></li>
        <li><a href="#">Cancel</a></li>
    </ul>
    <div class="clear"></div>

  <div class="release-creation">

<div class="release-section-title">Release Information</div>
      <div class="release-section">
        <div class="release-create-artwork">
      <img src="img/artwork.jpg" alt="">
    </div>

    <div class="release-create-basic-information">
      <div class="release-create-column">
        <input autofocus placeholder="Release title" type="text" ng-model="vm.release.title" class="input">
        <input ng-model="vm.release.genre" id="release-create-genre" placeholder="Genres (comma separated)" type="text" class="input">
        <textarea ng-model="vm.release.tags" id="release-create-tags" placeholder="Tags (comma seperated)" class="input textarea"></textarea>
      </div>

      <div class="release-create-column">
        <div class="release-date-choice">
          <div class="release-date-option">
            <input ng-model="vm.release.releaseDate" checked name="release-date" id="release-radio-current" type="radio" class="release-radio">
            <label for="release-radio-current">Current date</label>
          <div class="clear"></div>
        </div>

        <div class="release-date-option">
          <input ng-model="vm.release.releaseDate" name="release-date" id="release-radio-future" type="radio" class="release-radio">
          <label for="release-radio-future">Use a different release date</label>
          <div class="clear"></div>
        </div>
      </div>
                        <div class="release-create-date">
                            <input disabled placeholder="DD" type="text" class="input input-day">
                            <input disabled placeholder="MM" type="text" class="input input-month">
                            <input disabled placeholder="YYYY" type="text" class="input input-year">
                        </div>
                        <textarea ng-model="vm.release.description" placeholder="Description" class="input textarea"></textarea>

                    </div>
                </div>
                <div class="clear"></div>
            </div>
            <div class="release-section-title">Pricing</div>
            <div class="release-section">
                <div class="release-pricing">
                    <div class="release-input">
                        <div class="form-group release-price">
                            <label for="whole-release-price">Whole release price</label>
                            <input ng-model="vm.release.releasePrice" id="whole-release-price" type="number" class="input">
                        </div>
                        <div class="form-group track-price">
                            <label for="single-track-price">Single track price</label>
                            <input ng-model="vm.release.trackPrice" id="single-track-price" type="number" class="input">
                        </div>
                        <div class="form-group clear">
                            <input ng-model="vm.release.payMore" id="pay-more" type="checkbox" value="false">
                            <label for="pay-more">Let people pay more if they want?</label>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
            </div>
            <div class="release-section-title">Track List</div>
            <div class="release-section">
                <input id="track-upload" type="file" file-upload class="hidden" multiple>
                <div class="track-list"> 
                    <ul ng-sortable="{ group: 'tracks', animation:150 }" id="release-track-list">
                        <li style="display:none;"></li>
                    </ul>
                </div>
          </div>
      </div>
  </div>
  <button class="btn btn-primary" ng-click="vm.save">Submit</button>

And my routes (notice the /releases/create doesn't have a controller as it's using a directive)

angular.module('bandzest.routes.release', [])
.config(ReleaseRouter);

ReleaseRouter.$inject = ['$routeProvider', '$locationProvider', 'USER_ROLES'];

function ReleaseRouter($routeProvider, $locationProvider, USER_ROLES) {

  $routeProvider
  .when('/releases/create', {
    templateUrl: '/app/components/release/view.create.release.html',
    data: {
      authorisedRoles: [USER_ROLES.guest, USER_ROLES.user, USER_ROLES.artist]    
    }
  })
  .when('/releases/:id', {
    templateUrl: '/app/components/release/view.show.release.html',
    controller: 'ReleaseController',
    controllerAs: 'vm',
    data: {
      authorisedRoles: [USER_ROLES.guest, USER_ROLES.user, USER_ROLES.artist]    
    }
  })
  .when('/releases', {
    templateUrl: '/app/components/release/view.index.release.html',
    controller: 'ReleaseController',
    controllerAs: 'vm',
    data: {
      authorisedRoles: [USER_ROLES.guest, USER_ROLES.user, USER_ROLES.artist]  
    }
  });
}

When I hit the submit button, nothing happens. I took all of the code out of the partial and replaced it with a simple ng-click to a function in the directive writing something to the console and that didn't work either.

Finally, the view calling the directive:

<artist-menu></artist-menu>
<section class="page-content">
    <div class="releases-container">
      <create-release></create-release>
    </div>
</section>

Answer 1

The ng-click directive takes an "expression to evaluate upon click" . What you are giving it is a reference. Have you tried the following?

<button class="btn btn-primary" ng-click="vm.save()">Submit</button>