Angularjs - How to submit a form from different controller?

Question

<div ng-controller="ctrl1">
    <form name="form1" ng-submit="submitForm()">
        <input type="text" name="email" />
    </form>
</div>

<div ng-controller="ctrl2">
    <button> Submit </button>
</div>

Here from ctrl2, I want to trigger form submit action for a form which is in ctrl1

How to achieve this in angularJs?

Answer 1

You could emit an event on the button click and then use rootscope to broadcast it down - ctrl1 could then listen for this an submit the form in response.

Answer 2

You can achieve using $rootScope or services or event brodcasting

app.controller('ctrl2',['$scope','$rootScope',function($scope,$rootScope) {
    $scope.submitForm = $rootScope.mainSubmit();
}]);

app.run(function($rootScope){
    $rootScope.mainSubmit =function(){
        console.log("hey");
    };
})

Answer 3

You can emit an event from the second controller and listen to it in the first controller.

function CtrlOne($rootScope) 
{
  $rootScope.$on('submitEvent', function(event, args) {
      //submit your form here
  });
}

function CtrlTwo($scope,$rootScope) 
{
  $scope.submit=function(){
    $rootScope.$emit('submitEvent', args);
  }
}

<div ng-controller="CtrlOne">
    <form name="form1" ng-submit="submitForm()">
        <input type="text" name="email" />
    </form>
</div>

<div ng-controller="CtrlTwo">
    <button ng-click="submit()"> Submit </button>
</div>