Angularjs: how do i pass a value from a form to a other form?

Question

i need to get the Id from a table and pass it to a controller, i did something like that but the id value is lost every time i change the form, i would like know if there is a way to do that,i added the service code, and the controllers code

//Here in get the IdValue

app.controller('SeguimientoSolicitudesController', ['$scope', 'ParametrosSolicitudes', function ($scope, ParametrosSolicitudes) {
        this.SegSolic = "";        
        var self = this;

        $scope.ValorId = function (value) {
            ParametrosSolicitudes.setVarIdSolicitud(value);
            window.location.href = urlServer + "Home/About";
        };


        solicitudContext.obtenerListaSegSolicitudes(function (resp) {
            switch (resp.ressult) {
                case "tgp":
                    self.SegSolic = solicitudContext.ListaSeguimientoSolicitudes;
                    break;
                case "notgp":
                    break;
                default:
                    break;
            }
            $scope.$apply();
        });       
    }]);

//Here i get the detail of the id selected but the value is missing
app.controller('SolicitudesController', ['$scope', 'ParametrosSolicitudes', 'parametroConstante', function ($scope, ParametrosSolicitudes, parametroConstante) {
        this.SolicitudDetalle = "";
        var IdSolicitud = '';
        var self = this;

        $scope.$watch(function () { return ParametrosSolicitudes.getVarIdSolicitud() }, function () {
            IdSolicitud = ParametrosService.getVarIdSolicitud();
        });
        solicitudContext.obtenerListaSolicitudes('R', IdSolicitud, function (resp) {
            switch (resp.ressult) {
                case "tgp":
                    self.SolicitudDetalle = solicitudContext.ListaSolicitudes;
                    break;
                case "notgp":
                    break;
                default:
                    break;
            }
            $scope.$apply();
        });
    }]);

Answer 1

Rafa, you have a conceptual problem, any JS variables is going to be lost when you reload the page, this mean when you do:

window.location.href = urlServer + "Home/About"

you are lossing all data in the client side.

Then, for navigate from a page to another in AngularJS you should use: $location service, in your case something like $location.path("Home/About");

https://docs.angularjs.org/api/ng/service/$location

check this sample

var app = angular.module('app', ['ngRoute']);

app.config(['$routeProvider', function ($routeProvider) {
  $routeProvider
    .when('/', {
		controller: "SeguimientoSolicitudesController",
		templateUrl: "SeguimientoSolicitudes.html"	
	})
    .when('/details/:id/', {
		controller: 'SolicitudesController', 
		templateUrl: "Solicitudes.html"
	})
}]);

app.service("shareService", function(){
	// lose this value if you reload the page, if you need it persistent you have to save to server or save to browser(cookies, localStorage)
	var name = null;
	
	return {
		getName: function(){
			return name;
		},
		setName: function(val){
			name = val;
		}
	}
})

app.controller('SeguimientoSolicitudesController', ['$scope', '$location','shareService',function ($scope, $location, shareService) {       
	$scope.list = [{id: 5, name: "NameA"}, {id: 9, name: "NameB"}];

	$scope.goToDetails = function(item){
		shareService.setName(item.name);
		$location.path("details/" + item.id);
	}
}]);    
    
app.controller('SolicitudesController', ['$scope','$routeParams','shareService',function ($scope, $routeParams, shareService) {                    
	$scope.id = $routeParams.id;
	$scope.name = shareService.getName();
}]);

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container"  ng-app="app">
	<ng-view></ng-view>
		
  <script type="text/ng-template" id="SeguimientoSolicitudes.html">
    <p ng-repeat="item in list">
      <a class="btn btn-link" ng-click="goToDetails(item)" style="cursor: pointer;">{{item.name}}</a>
    </p>
  </script>

  <script type="text/ng-template" id="Solicitudes.html">
     <p>ID: {{id}}, NAME: {{name}}</p>
      <a class="btn btn-link" href="#/">back</a>
  </script>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular-route.min.js"></script>

Hope I help you