Ionic pass image position to new screen ($state.go)

i have a grid with pics and i'd like to get the clicked pick position to pass to a full screen (using $state.go). I've implemented all stuff but the index position is always 0. This is my code:

Grid screen (secure.html):

<ion-view title="My Images" ng-init="">
<ion-nav-buttons side="right">
    <button class="button button-icon icon ion-camera" ng-click="upload()"></button>
</ion-nav-buttons>
<ion-content>
    <div class="row" ng-repeat="image in images" ng-if="$index % 4 === 0">
        <div class="col col-25" ng-if="$index < images.length" ng-click="fullscreen($index)">
            <ion-scroll zooming="true" style="width: 100%; height: 100%">
              <img ng-src="data:image/jpeg;base64,{{images[$index].image}}" width="100%" />
            </ion-scroll>
        </div>
        <div class="col col-25" ng-if="$index + 1 < images.length" ng-click="fullscreen($index+1)">
            <img ng-src="data:image/jpeg;base64,{{images[$index + 1].image}}" width="100%" />
        </div>
        <div class="col col-25" ng-if="$index + 2 < images.length" ng-click="fullscreen($index+2)">
            <img ng-src="data:image/jpeg;base64,{{images[$index + 2].image}}" width="100%" />
        </div>
        <div class="col col-25" ng-if="$index + 3 < images.length" ng-click="fullscreen($index+3)">
            <img ng-src="data:image/jpeg;base64,{{images[$index + 3].image}}" width="100%" />
        </div>
    </div>
</ion-content>

app.js:

imageApp.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
    .state("firebase", {
        url: "/firebase",
        templateUrl: "templates/firebase.html",
        controller: "FirebaseController",
        cache: false
    })
    .state("fullscreen", {
        url: "/fullscreen",
        templateUrl: "templates/fullscreen.html",
        controller: "SecureController",
        params:      {'index': null, 'anotherKey': null}
    })
    .state("secure", {
        url: "/secure",
        templateUrl: "templates/secure.html",
        controller: "SecureController"
    }),
$urlRouterProvider.otherwise("/firebase");});


imageApp.controller("SecureController", function($state, $scope, $ionicHistory, $firebaseArray, $cordovaCamera) {


$scope.images = [];
$scope.index = 0;

var fbAuth = fb.getAuth();
if(fbAuth) {
    var userReference = fb.child("users/" + fbAuth.uid);
    var syncArray = $firebaseArray(userReference.child("images"));
    $scope.images = syncArray;
} else {
    $scope.go("firebase");
}


$scope.fullscreen = function(index) {

    $scope.index = index;
    //$state.go("fullscreen", { 'index':index });
    $state.go('fullscreen', { 'index': index, 'anotherKey': 'This is a test' })
}

$scope.upload = function() {
    var options = {
        quality : 75,
        destinationType : Camera.DestinationType.DATA_URL,
        sourceType : Camera.PictureSourceType.CAMERA,
        allowEdit : true,
        encodingType: Camera.EncodingType.JPEG,
        popoverOptions: CameraPopoverOptions,
        targetWidth: 500,
        targetHeight: 500,
        saveToPhotoAlbum: false
    };
    $cordovaCamera.getPicture(options).then(function(imageData) {
        syncArray.$add({image: imageData}).then(function() {
            alert("Image has been uploaded");
        });
    }, function(error) {
        console.error(error);
    });
}});

Finally the full screen (fullscreen.html) when any pic is clicked:

<ion-view title="Image Full screen" ng-init="">
<ion-content>
        <div class="col col-100">
            <img ng-src="data:image/jpeg;base64,{{images[index].image}}" width="100%" />
        </div>
</ion-content>

It's rare because "images" is read correctly, but "index" is always 0 value, i've started trying using a var like images, i mean:

    $scope.images = [];
$scope.index = 0;

These lines get images array but index is modified only in controller.js, but in the fullscreen.html is 0..... I have no idea what is happennig

you can create anservices "Context" where you write your "active image" path. so that you don't need using state parameters.

moreOver this not resolve why $index is imutable...

sevices exemple :

`angular.module('app.contextService', [])
.service('sContext', function sContext ( $log) {
var me = this;
me.index = null;
`})

inject it in your card controller :

     .controller('cardControler', function cardControler($scope, $log,sContext ) {

$scope.fullscreen = function(index) {

    sContext.index = index
    $state.go('fullscreen')
}

    })

and in your full screen :

      .controller('cardControler', function cardControler($scope, $log,sContext ) {
var me = this;
me.sContext = sContext;

//now you can read you value in html with: <controllerAlias>.sContext.index

    })

use alias is a good practice. but if it disturb you, you can publish you var on $scope. (me => $scope). except in services, who have not $scope of course