Two controller and a service, by Angular

page.js

/**
 * Two controller and a service, by Angular
 */

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

app.controller("ChartController",['$http','ChartDataService',function($http,ChartDataService){
    ChartDataService.on_get_data().then(null, null, function(data) {
			//to when notified by the service    
        });
	}
]);

app.controller("FormController",['$http','ChartDataService',function($http,ChartDataService){    
    this.fetch_stats = function(data){
        ChartDataService.fetch_stats(data);
    }
}]);

app.service('ChartDataService',["$http","$q",function($http,$q){
    var chart_ctrl_notifier = $q.defer();

    this.on_get_data = function () {
        return chart_ctrl_notifier.promise;
    };

    this.fetch_stats = function (data) {
        $http({url:'get_gcm_data', method:"POST",data:$.param(data),
            headers : {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}})
            .success(function(resp) {
                chart_ctrl_notifier.notify(resp);
            })
            .error(function(err) {
                console.log("error on request");
            });
    };
}]);


/*
 *   Post request with the form data
 */
$http({url:'get_gcm_data', 
		method:"POST",
		data:$.param(data),
		headers : {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}}).then(function successCallback(response) {
                    response= response.data;
		},
		 function errorCallback(response) {
                    console.log(response);
        });

// response
{data: "count:0", status: 200, config: Object, statusText: "OK"}		
		
		
/*
 * Form example
 */
 
 <form ng-controller="FormController as FormCtrl" class="col-md-12 form-inline" ng-submit="FormCtrl.fetch_stats(FormCtrl.form_data)">
	<div class="form-group">
		<label>Date:</label><br>
		<input class="form-control" type="text" ng-model="FormCtrl.form_data.date"/>
	</div>
	<div class="form-group">
		<label>Category:</label><br>
		<select class="form-control" ng-options="cat for cat in FormCtrl.categories" ng-model="FormCtrl.form_data.category">
			<option value="">Choose a category</option>
		</select>
	</div>
	<div class="form-group">
		<label>Country:</label><br>
		<select class="form-control" ng-model="FormCtrl.form_data.country">
			<option value="-1">Choose a country</option>
			<option ng-repeat="country in FormCtrl.countries" value="{{country.id}}">{{country.name}}</option>
		</select>
	</div>
	<div class="form-group">
		<label>Gender:</label><br>
		<select class="form-control" ng-model="FormCtrl.form_data.gender">
			<option value="">Choose a gender</option>
			<option ng-repeat="gender in FormCtrl.genders" value="{{gender.id}}">{{gender.name}}</option>
		</select>
	</div>

	<div class="form-group">
		<label></label><br>
		<input type="submit" class="btn btn-primary pull-right" value="Submit" />
	</div>
	{{FormCtrl.form_data}}
</form>

//document based click listener
$(document).on('click', '#id', function(){});