Event from directive template AngularJS

Question

angular.module('InvoicerApp')
    .directive('invoice', function() {
        return {
            restrict: 'E',
            templateUrl: 'templates/invoice-directive.html',
            scope: true
        };
    });

invoice-directive.html

        <div class="row">
            <div class="col-md-1">
                <input type="text" ng-model="invoice.product.tax" class="form-control input-sm" placeholder="TVA">
            </div>
            <div class="col-md-1">
                <select type="text" ng-model="invoice.product.includeTax" class="form-control input-sm" placeholder="TVA?">
                    <option value="true" selected>Include TVA</option>
                    <option value="false">Nu include TVA</option>
                </select>
            </div>
            <div class="col-md-1">
                <button type="text" ng-model="invoice.product.add" class="btn btn-primary btn-sm" ng-click="invoiceAddProduct()">
                    <span class="glyphicon glyphicon-plus"></span>
                </button>
            </div>
        </div>

a controller

$scope.invoice = {};
    $scope.invoice.products = [];
    $scope.client = {};


    $scope.invoiceAddProduct = function() {
        console.log("HELLO");    
    };

invoiceAddProduct is not being fired from inside the directive template. How can I access the models from inside the directive template in the controller?

Answer 1

Looks like your directive's scope is not falling under your controller's scope. Please check your HTML. Look at the fiddle where I am calling a controller function from a directive :

Demo : jsfiddle.net/X7Fjm/2/