Pass $scope along with $location.Path() in AngularJS - html

Question

I have two screens in my project, MemberList.HTML and EditMember.html.
MemberList.HTML displays all members with Edit link for each member.
When I click on Edit link, it calls the function ng-click="EditMember(member)" and code for EditMember(member) is
$scope.EditMember = function (member) {
var getData1 = angularService.GetMember(member.ID);
getData1.then(function (mem) {
$scope.Member = mem.data;
alert($scope.Member.FirstName);
$location.path('/members/editmember');
}, function (error)
{
alert('Error in getting Member record');
}
);
};
code for EditMember.Html
<div>
<div class="bottom-margin">
<div class="left-label">ID</div>
<div><input type="text" name="txtID" id="txtID" ng-model="Member.ID"/></div>
</div>
<div class="bottom-margin">
<div class="left-label">First Name</div>
<div><input type="text" name="txtFirstName" ng-model="Member.FirstName"/></div>
</div>
</div>
<div>
<div class="bottom-margin">
<div class="left-label"><input type="button" name="btnCancel" value="Cancel" /></div>
<div><input type="button" name="btnSave" value="Save" /></div>
</div>
</div>
Route configuration is
$routeProvider.when('/members/editmember',
{
templateUrl: '/Template/EditMember.html',
controller: 'myCntrl'
});
Now the problem is, in alert it is showing me the First Name but it is not displaying any data in EditMember.Html.
Everything is in same angular CONTROLLER, there is no different controller is used here.
How do I pass $scope with member data to EditMember.Html? What am I doing wrong?

Answer 1

Unlike services, controllers are not singletons in angular. When you changed the location, a new instance of that controller was created, and therefore a new scope.
Personally, I would pass a reference in the URL to the member you want to edit, e.g. /members/edit/1234, and load that data in when the controller loads, or during routing using $routerProvider resolve.
Personally, I would also consider using a different controller for editing vs viewing, and moving any shared functionality into services - just to keep things coherent.

Answer 2

#glennanthonyb, I did something like this....I am using the same controller here.
In route, I have added
$routeProvider.when('/members/editmember/:ID',
{
templateUrl: '/Template/EditMember.html',
controller: 'myCntrl'
});
and in the Controller I have added $routeParams parameter
if ($routeParams.ID != null) {
GetMember();
}
function GetMember() {
var getData = angularService.GetMember($routeParams.ID);
getData.then(function (mem) {
$scope.Member = mem.data;
}, function (error) {
alert('Error in getting records');
});
}
In MemberList.Html instead of calling a function, I am using href
Edit
I am not sure if it is the right way to do it or not but it is working.