AngularJS: How to get controller in directive to access value in view? - angularjs

Question

So, I'm using a directive which is a form to allow the app user to edit or create users.
When I navigate to users/:id, I'm pulling in a userDetail view which pulls in a directive user-form.
...
<h1>User Detail</h1>
<p>{{ detail.first_name }}</p>
<p>{{ userDetail.last_name }}</p>
<p>{{ userDetail.age }}</p>
<p>{{ userDetail.address }}</p>
<p>{{ userDetail.gender }}</p>
<user-form ctrl="editUser" user-detail="userDetail"></user-form>
This view has a controller which pulls in the userDetail via an ajax call:
userDetail.controller("UserDetailController", ['$http', '$scope', '$routeParams', function($http, $scope, $routeParams) {
function getUser() {
var url = "http://localhost:3000/api/users/" + String($routeParams.id)
$http.get(url).then(function(response) {
$scope.userDetail = response.data;
if (!response.data) {
document.location = '/#!/error'
}
})
}
getUser();
}]);
So I created my directive and its controller is based on the ctrl attribute when I pull in the directive depending on the page I am:
function createUser($scope, $rootScope, $http) {
$scope.submitUser = function(isValid) {
var url = 'http://localhost:3000/api/users'
var data = $scope.user;
var config = 'contenttype';
if (isValid) {
$http.post(url, data, config).then(function(response) {
$scope.users.push(response.data);
});
}
}
}
function editUser($scope, $http, $routeParams) {
setTimeout(function() {
//get $scope.userDetail
//assign $scope.user = $scopeDetail to populate the form with the details to allow editing.
console.log($scope.user);
}, 2000)
}
function userFormDirective() {
return {
scope: { users: '=', userDetail: '=', user: '=' },
name: 'ctrl',
controller: '#',
templateUrl: 'components/userForm/userForm-template.html',
}
}
var app = angular.module('user-management', [
'ngRoute',
'users',
// 'userForm',
'userDetail'
]).directive('userForm', userFormDirective)
.controller('createUser', createUser)
.controller('editUser', editUser);
Here is my userForm template:
<form name="userForm" novalidate ng-submit="submitUser(userForm.$valid)">
<fieldset>
<dl>
<dt><label for="first-name">First Name</label></dt>
<dd><input id="first-name" ng-model="user.first" type="text" required /></dd>
</dl>
<dl>
<dt><label for="last-name">Last Name</label></dt>
<dd><input id="last-name" ng-model="user.last_name" type="text" required/></dd>
</dl>
<dl>
...
So basically, when I go to users/2, it does an AJAX request to get the user details 9Hence, a timeout function). Then, I want the directive's controller to access the models in the view so that I can assign the userDetails that were obtained and assign it to the models in the view, thereby autpopulating it and allowing edits. Not sure if this is a correct way of doing it because I'm rather new to AngularJS.