Use window.location.href with Angularjs variable

Question

Hello I’m new in Angularjs, I appreciate any help if you can. I have a question: I have a collection of items that are loaded on the main page is all ok ,but one of the items is a url and I would like when loaded allow you to access the landing page. In reality when I put the url directly into the function it works, but trying to take from a variable ,I click and nothing happens .. the code below works *** .

  var data = {};
  var app = angular.module('myApp',['onsen']);
   module.controller('myCtrl',function($window, $scope){
    $scope.myFunction = function(){
    $window.location.href =   ' **colocando o caminho de uma pagina aqui funciona, mas quero pegar da variavel myurl abaixo.**'


    }
});

Almost complete code below.. JS and html ..

module.factory('$data', function() {


  data.items = [
      {
          Image: 'steak-353115_640.jpg',
          title: 'Novo',
          label: 'Evento',
          desc: 'Gerencie um novo evento e .....,
          myurl: 'home.html'
      },
      {   Image: 'r878.jpg',
          title: 'Lista',
          label: 'Assistente',
          desc: 'Não definido',
           myurl: 'guia.html'
      }
  ];

  return data;
 });
var data = {};
  var app = angular.module('myApp',['onsen']);
   module.controller('myCtrl',function($window, $scope){
    $scope.myFunction = function(){
    $window.location.href =   myurl //Eu queria pegar a url da variável
    }
   });

As I click on an item it loads the respective values of the variables, ie ,nuncarepete since the data are unique

<ons-list modifier="inset" style="margin-top: 10px">
            <ons-list-item class="item">
                <ons-row>
                    <ons-col width="60px">
                        <div ><img class="item-thum" ng-src="images/{{item.Image}}" style="margin:auto;"></div>
                    </ons-col>
                    <ons-col>
                        <header>
                            <span class="item-title">{{item.title}}</span>
                            <span class="item-label">{{item.label}}</span>
                        </header>
                        <p class="item-desc">{{item.desc}}</p>
                    </ons-col>
                </ons-row>
            </ons-list-item>
           <div ng-controller="myCtrl">

            <ons-list-item modifier="chevron" ng-click="myFunction()">
                <ons-icon icon="ion-chatboxes" fixed-width="true" style="color: #ccc"></ons-icon>
                Add a note
            </ons-list-item>

Answer 1

Do so on your controller:

module.controller('myCtrl',function($window, $scope){
       $scope.myFunction = function(item){
            var url = String(window.location);
            url = url.substr(0, String($window.location.href).indexOf("www") + 4);
            $window.location.href =  url + item.mmyurl;

       }
 });

And in HTML:

<ons-list-item modifier="chevron" ng-click= "myFunction(item)">
      <ons-icon icon="ion-chatboxes" fixed-width="true" style="color: #ccc"></ons-icon>
      NAVEGAR PARA A PRÓXIMA PAGINA DE ACORDO COM OS ELEMENTOS CARREGADOS
</ons-list-item>