I'm using AngularJS 1.4.2 (with Angular Material) and I'm trying to implement a save function. However, ng-click is not firing on my button. Here is my HTML code:

<div ng-controller="ModelEditController" class="col-lg-12 fontArial slide" ng-repeat="mdl in model">
    <md-content layout-padding>
            <form name="modelEditForm" novalidate role="form" unsaved-warning-form>
            <md-input-container flex style="width:100%">
                        <label>Name</label>
                        <input required name="model_name" ng-model="mdl.model_name" maxlength="100">
                </md-input-container>

        </form>
    </md-content>

    <div class="panel-footer footer" ng-controller="TestController">
        <md-button class="md-fab md-primary md-hue-2" aria-label="Save" ng-click="editModel(mdl)">
                    <md-icon md-svg-src="/img/icons/save.svg"></md-icon>
        </md-button>

    </div>
</div>

And here is my javascript code:

var myApp = angular.module('myApp', ['ui.bootstrap', 'ui.router', 'ngCookies', 'ng-sortable', 'vAccordion', 'ngRoute', 'ngAnimate', 'fiestah.money', 'uiSwitch','ngMaterial','ngMessages','unsavedChanges'])
});


myApp.controller('TestController', ['$scope', 'ModelService', function ($scope,ModelService){

        function editModel(xMdl) {
            console.log("Inside edit model");

        }

    }]);

The "Inside edit model" text is not being output to the console. Why would the ng-click not be working?

I'm using AngularJS 1.4.2 (with Angular Material) and I'm trying to implement a save function. However, ng-click is not firing on my button. Here is my HTML code:

<div ng-controller="ModelEditController" class="col-lg-12 fontArial slide" ng-repeat="mdl in model">
    <md-content layout-padding>
            <form name="modelEditForm" novalidate role="form" unsaved-warning-form>
            <md-input-container flex style="width:100%">
                        <label>Name</label>
                        <input required name="model_name" ng-model="mdl.model_name" maxlength="100">
                </md-input-container>

        </form>
    </md-content>

    <div class="panel-footer footer" ng-controller="TestController">
        <md-button class="md-fab md-primary md-hue-2" aria-label="Save" ng-click="editModel(mdl)">
                    <md-icon md-svg-src="/img/icons/save.svg"></md-icon>
        </md-button>

    </div>
</div>

And here is my javascript code:

var myApp = angular.module('myApp', ['ui.bootstrap', 'ui.router', 'ngCookies', 'ng-sortable', 'vAccordion', 'ngRoute', 'ngAnimate', 'fiestah.money', 'uiSwitch','ngMaterial','ngMessages','unsavedChanges'])
});


myApp.controller('TestController', ['$scope', 'ModelService', function ($scope,ModelService){

        function editModel(xMdl) {
            console.log("Inside edit model");

        }

    }]);

The "Inside edit model" text is not being output to the console. Why would the ng-click not be working?

• javascript
• angularjs

1 Answer 1

That's because your editModel function isn't attached to $scope. Try:

$scope.editModel = function(){ ... };