AngularJS ng-click 不起作用

Question

I am trying to implement a small project in Angular JS and im stuck trying to call a function on ng-click which doesn't work however initial load is fine..what i want is to be able to recall the ajax with params which i have tested and works but can't call the function via the ng-click.

i am using asp.net mvc5 and angularjs,

Index.chtml:

@{
    ViewBag.Title = "Main";
}

<div class="wrapper wrapper-content" ng-app="mainModule" ng-controller="mainController">

    <div class="row">
        <div class="form-group col-lg-3 col-sm-6">
            <button type="submit" class="btn btn-warning" ng-click="getObject()">Apply</button>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-3 col-sm-6">
            <div>@Html.Partial("_Booking")</div>
        </div>
        <div class="col-lg-3 col-sm-6">
            <div>@Html.Partial("_Commission")</div>
        </div>
        <div class="col-lg-3 col-sm-6">
            <div>@Html.Partial("_Discount")</div>
        </div>
        <div class="col-lg-3 col-sm-6">
            <div>@Html.Partial("_Revenue")</div>
        </div>
    </div>

</div>

@section Scripts {

    @Scripts.Render("~/scripts/main")

}

main.js

var mainModule = angular.module("mainModule", []);

mainModule.controller("mainController", [
       "$scope", "mainFactory", function ($scope, mainFactory) {
           $scope.returnedObject = {};
           mainFactory.getObject()
               .then(function (response) {
                   $scope.returnedObject = response.data;
                   console.log(response.data);
               }, function (error) {
                   console.error(error);
               });
       }
]);

mainModule.factory("mainFactory", function ($q, $http) {
    return {
        getObject: function () {
            var deferred = $q.defer(),
                httpPromise = $http({ method: "GET", url: "/Main/BookingData" });

            httpPromise.then(function (response) {
                deferred.resolve(response);
            }, function (error) {
                console.error(error);
            });

            return deferred.promise;
        }
    };
});

Answer 1

HTML should change to the following as it's not a form submission.

<button type="button" class="btn btn-warning" ng-click="getObject()">

You need to bind getObject function in your controller. It should be:

    $scope.getObject = function () {
              mainFactory.getObject()
                   .then(function (response) {
                       $scope.returnedObject = response.data;
                       console.log(response.data);
                   }, function (error) {
                       console.error(error);
                   });
    };


    // Run on load
    $scope.getObject();