Dean Christian Armada Dean Christian Armada - 1 year ago 98
AngularJS Question

Trigger Event Click upon page load

I do not know why I can not trigger a click event on my controller upon page load. What I want is the checkboxed to be click literally.

<!DOCTYPE html>
<html >

<link rel="stylesheet" type="text/css" href="">
<script src=""></script>
<script src=""></script>

<body ng-app="ngToggle">
<div ng-controller="AppCtrl">
<input type="checkbox" ng-model="dean" ng-click="btnChange($event, values, 1)" id="one" name="one" class="here" >
<input type="checkbox" ng-model="armada" ng-click="btnChange($event, values, 2)" id="two" name="one" class="here" >
<!--<p ng-repeat="btn in btns">-->
<!-- <input type="checkbox" ng-model="btn.bool" class="here" > {{ btn.value }}-->
{{btn }}
{{values }}
<script type="text/javascript">
angular.module('ngToggle', [])
.controller('AppCtrl',['$scope', function($scope){
$scope.btns = [{}, {}, {}];
$scope.values = [];
$scope.btnChange = function(event, model, val){
_this = angular.element(;
x = _this.prop("checked");
index = model.indexOf(val);
model.splice(index, 1);

Here is the plunker:

Answer Source

I see that you have used jQuery on the page. So you can simply do this :


A complete jQuery solution would be :


A complete angular solution would be (like others mentioned) :

angular.element(document).ready(function() {

You are triggering the code to click when the document is not completely ready/rendered so you need to wait till the entire document(or in this case, your checkbox) is loaded and only then you can perform actions on your elements.