How do I get the data from a view to another view in ionic?

Question

I have followed this tutorial ionic/angular - get data from database - data loaded, but no output on site on how to retrieve data from database and show it in ionic but the problem is the data can only be seen in one view and I dont know how to view it in another view

screencap - I have successfully display the recipes in my ionic from my database and when I click the pen icon it should be displaying the recipe name, ingredients and more

screencap 2 - but when I click it it doesnt show any data.

here's my code for viewing data :

user_model.php (codeigniter - model )

public function user_recipe_data()
    {
        $this->db->select('*');
        $this->db->from('usersrecipes');
        $this->db->join('user', 'user.user_id = usersrecipes.user_id');
        $this->db->where('usersrecipes.user_id = 12 ');
        $query = $this->db->get();
        return $query->result_array();
    }

Main.php ( codeigniter - controller )

public function get_user_recipe_data()
{
    $postdata = json_decode(file_get_contents("php://input"));
    $user_recipe = $this->User_model->user_recipe_data();
    echo json_encode($user_recipe);
}

RecipeService.js (ionic)

.factory('getRecipeService', function($http){

return {
    all: function() {
      return $http.get("http://localhost/admin-recipick/api/Main/get_user_recipe_data");
    },
    get: function(Recipe_ID) {
        q = $http.get("http://localhost/admin-recipick/api/Main/get_user_recipe_data");
  for (var i = 0; i < q.length; i++) {
    if (q[i].id === parseInt(Recipe_ID)) {
      return q[i];
    }
  }
  return null;
}
};

});

controller.js (ionic)

 getRecipeService.all().then(function(payload) {
 $scope.userrecipedata = payload.data;
 console.log(payload);
});

profile.html ( ionic )

 <ion-list>
              <ion-item ng-repeat="recipe in userrecipedata" class="item-remove-animate item-avatar item-icon-right"  type="item-textu-wrap" href="#/app/recipes/{{recipe.Recipe_ID}}">
                <img ng-src="img/food/porkmenudo.jpg">

                <h2>{{recipe.Recipename}}</h2>
                <p>{{recipe.Ingredients}}</p>
                <i class="icon ion-edit"></i>
                <ion-option-button class="button-assertive" ng-click="remove(recipe)">
                  Delete
                </ion-option-button>
              </ion-item>
            </ion-list>

recipe-detail.html ( ionic - in this html I want to display the data here also but it shows no data in the input type. What should I do?)

    <div class="list">

        <label class="item item-input">
          <span class="input-label">Index Name</span>
            <input type="text" ng-model="recipe.Recipe_ID">
        </label>
        <label class="item item-input">
           <span class="input-label">Recipe Name</span>
             <input type="text" ng-model="recipe.Recipename">
         </label>
         <label class="item item-input">
            <span class="input-label">Ingredients</span>
              <input type="text" ng-model="recipe.Ingredients">
         </label>
         <label class="item item-input item-select">
            <span class="input-label">Cooking Time</span>
              <select ng-model="recipe.Cookingtime">
                 <option value="20mins">20mins</option>
                 <option value="30mins">30mins</option>
                 <option value="1hr">1hr</option>
               </select>
          </label>
          <label class="item item-input">
              <textarea placeholder="PROCEDURE" rows="12" ng-model="recipe.Procedure">
              </textarea>
          </label>
           <button class="button button-block button-assertive h1" ng-click="AddRecipe()">Update Recipe</button>
          </div>

Answer 1

Use http for controller

.controller('Ctrl', function($scope, $http, $stateParams) {
$scope.userrecipedata = [];

$http.get('http://localhost/admin-recipick/api/Main/get_user_recipe_data').success(function(response){
    $scope.userrecipedata = response;
}); 
})