Get data from controller in Angular js - angularjs

Question

I tried to create a small service for adding and getting. I have successfully added details when I click register(form details are added)in one controller. Now I want that form details in another controller, but I'm not getting it. I'm able to get that details in that get function and able to print in console but I cannot pass them to html
Here is my HTML:
<div id="inputArea" style="border: 1px solid blue;width: 800px;height: 45px;margin: auto;" ng-controller="MyFormCtrl">
<form name="myForm" ng-submit="register()">
<input class="inputfield" type="text" style="margin-left: 13px;" placeholder="enter first name" ng-model="user.fname">
<input class="inputfield" type="text" style="margin-left: 13px;" placeholder="enter last name" ng-model="user.lname">
<input class="inputfield" type="text" style="margin-left: 10px;" placeholder="enter designation" ng-model="user.designation">
<input class="inputfield" type="text" style="margin-left: 10px;" placeholder="enter company" ng-model="user.company">
<input type="submit" style="float:right;" value="Register"> </form>
</div>
<div id="box" style="position: relative;top:200px;margin: auto;border:1px solid red;width:180px;height:90px;" ng-controller="DetailsConroller">
<input type="button" ng-click="getDetails()" value="get">
<!-- <input type="submit" style="" value="get">-->
<ul>
<li ng-repeat="x in employees"> {{ x.fname }} </li>
</ul>
</div>
my js:
var app = angular.module('myApp', []);
--->service for adding and get
app.service('employeeService', ['$rootScope', function ($rootScope) {
var employeeList = [];
return {
employeeList: []
, // var employeeList = [],
add: function (item) {
employeeList.push(item);
console.log('employeeList', employeeList);
}
, get: function () {
// console.log('in to get employeeList',employeeList);
return employeeList
}
};
}])
---->> COntroller to Add:
app.controller('MyFormCtrl', ['$scope', 'employeeService', function ($scope, employeeService) {
$scope.user = {
fname: ''
, lname: ''
, designation: ''
, company: ''
};
$scope.register = function () {
console.log('User clicked register', this.user);
employeeService.add(this.user);
//employeeService.updateUserData().set($rootScope.user);
};
}]);
--->>second controller to get:
app.controller('DetailsConroller', ['$scope', 'employeeService', function ($scope, employeeService) {
var employees = [];
$scope.getDetails = function () {
// console.log('User clicked register', this.user);
employees = employeeService.get();
console.log('User in to get', employees[0].fname);
return employees;
};
}]);
what am I doing wrong here?

Answer 1

You need to have a $scope variable,
Change your Controller like this,
app.controller('DetailsConroller', ['$scope', 'employeeService', function ($scope, employeeService) {
$scope.employees = [];
// console.log('User clicked register', this.user);
$scope.employees = employeeService.get();
console.log('User in to get', employees[0].fname);
}]);