Develop Reference

Ng-click won't execute

I want to make my div tag clickable, but I can't get it to work.
I am working with Angular 1.5 and Ionic V1.
When an user logs in I want he/she to be presented with this view:
<ion-modal-view>
<ion-header-bar>
<div class="buttons">
<button class="button" ng-click="closeModal()"><i class="ion-chevron-left big-icon"></i></button>
</div>
</ion-header-bar>
<ion-content>
<div class="modal" style="background-color: #EDEEF1;" ng-controller="LoginCtrl">
<div class="row row-white">
<div class="col col-grey">
<div class="divider20"></div>
<h4 style="margin-top:30px;">Martin Nordström</h4>
</div>
</div>
<div class="row row-white">
<div class="col col-grey">
<p style="color: #006E78; margin-bottom:40px;">990624****</p>
</div>
</div>
<div class="divider20"></div>
<div class="row row-white main-container">
<div class="col col-grey">
<p style="color:#006E78;">Vart vill du ta emot dina leveranser?</p>
</div>
</div>
<div class="info-box" ng-class="{'info-box-active':isActive}" ng-click="activeBtn()" ng-controller="LoginCtrl">
<div class="box-row">
<div class="header">
<p class="leftText">IKANO Bostad</p>
<p class="rightText">Leveransrum</p>
</div>
</div>
<div class="box-row">
<div class="fields">
<p class="leftText">Folkungagatan 100</p>
<p class="rightText">10 kr/månad</p>
</div>
</div>
</div>
<div class="info-box">
<div class="box-row">
<div class="fields mixed">
<p class="leftText">Lägg till en ny leveransbox</p>
<p class="rightText">0 kr/månad</p>
</div>
</div>
</div>
<div class="row row-white">
<div class="col col-grey">
<button style="border-radius:50px; width:200px; height:45px;" class="button" ng-click="closeModal()">Klar</button>
</div>
</div>
<div class="divider20"></div>
</div>
</ion-content>
That view is showing up after the user has logged in, but all the ng-clicks are not working. Here's the controller:
.controller('LoginCtrl', function ($scope, alerter, $localStorage, WizardHandler, datamapper, data, api, $state, authToken, $ionicModal, storage, endpointHandler, loadingHandler, $ionicPopup, $timeout) {
And inside the controller I have this function:
$timeout(function () {
$ionicModal.fromTemplateUrl('templates/deliveryDestination.modal.html', {
scope: $scope.$scope,
animation: 'slide-in-up'
}).then(function (modal) {
$scope.modal = modal
modal.show()
})
}, 1000)
EDIT: Here's the implementation of the activeBtn()
$scope.isActive = false
$scope.activeBtn = function () {
console.log("clicked!");
$scope.isActive = !$scope.isActive
}
I am new to Angular, but with my (little) experience I think that the problem has something to do with the controller who is not connected properly. But I can be wrong! Hopefully we can solve this problem together, and I am grateful for all the support I can get.
Thanks

var app = angular.module('app', []);
app.controller('LoginCtrl', function($scope) {
$scope.isActive = false
$scope.activeBtn = function () {
alert("clicked!");
$scope.isActive = !$scope.isActive
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<ion-header-bar>
<div class="buttons">
<button class="button" ng-click="closeModal()"><i class="ion-chevron-left big-icon"></i></button>
</div>
</ion-header-bar>
<ion-content ng-app="app" ng-controller="LoginCtrl">
<div class="modal" style="background-color: #EDEEF1;" >
<div class="row row-white">
<div class="col col-grey">
<div class="divider20"></div>
<h4 style="margin-top:30px;">Martin Nordström</h4>
</div>
</div>
<div class="row row-white">
<div class="col col-grey">
<p style="color: #006E78; margin-bottom:40px;">990624****</p>
</div>
</div>
<div class="divider20"></div>
<div class="row row-white main-container">
<div class="col col-grey">
<p style="color:#006E78;">Vart vill du ta emot dina leveranser?</p>
</div>
</div>
<div class="info-box" ng-class="{'info-box-active':isActive}" ng-click="activeBtn()">
<div class="box-row">
<div class="header">
<p class="leftText">IKANO Bostad</p>
<p class="rightText">Leveransrum</p>
</div>
</div>
<div class="box-row">
<div class="fields">
<p class="leftText">Folkungagatan 100</p>
<p class="rightText">10 kr/månad</p>
</div>
</div>
</div>
<div class="info-box">
<div class="box-row">
<div class="fields mixed">
<p class="leftText">Lägg till en ny leveransbox</p>
<p class="rightText">0 kr/månad</p>
</div>
</div>
</div>
<div class="row row-white">
<div class="col col-grey">
<button style="border-radius:50px; width:200px; height:45px;" class="button" ng-click="closeModal()">Klar</button>
</div>
</div>
<div class="divider20"></div>
</div>
</ion-content>
I don't see problem with this,can you check and compare with your's

You need to place the ng-controller="LoginCtrl" outside all the div, otherwise $scope won't get the context.
<ion-modal-view ng-controller="LoginCtrl">

angular.module('myApp', [])
.controller('LoginCtrl', function($scope) {
$scope.activeBtn = function(){
alert("asdasd")
}
});
<html ng-app="myApp">
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.js"></script>
<script type="text/javascript" src="app.js"></script>
<title>Angular-Google-Charts Example</title>
</head>
<body>
<div class="modal" style="background-color: #EDEEF1;" ng-controller="LoginCtrl">
<div class="row row-white">
<div class="col col-grey">
<div class="divider20"></div>
<h4 style="margin-top:30px;">Martin Nordström</h4>
</div>
</div>
<div class="row row-white">
<div class="col col-grey">
<p style="color: #006E78; margin-bottom:40px;">990624****</p>
</div>
</div>
<div class="divider20"></div>
<div class="row row-white main-container">
<div class="col col-grey">
<p style="color:#006E78;">Vart vill du ta emot dina leveranser?</p>
</div>
</div>
<div class="info-box" style="background-color:red;" ng-click="activeBtn()">
<div class="box-row">
<div class="header">
<p class="leftText">IKANO Bostad</p>
<p class="rightText">Leveransrum</p>
</div>
</div>
<div class="box-row">
<div class="fields">
<p class="leftText">Folkungagatan 100</p>
<p class="rightText">10 kr/månad</p>
</div>
</div>
</div>
<div class="info-box">
<div class="box-row">
<div class="fields mixed">
<p class="leftText">Lägg till en ny leveransbox</p>
<p class="rightText">0 kr/månad</p>
</div>
</div>
</div>
<div class="row row-white">
<div class="col col-grey">
<button style="border-radius:50px; width:200px; height:45px;" class="button" ng-click="closeModal()">Klar</button>
</div>
</div>
<div class="divider20"></div>
</div>
</body>
</html>
Works perfectly fine.Just removed ng-controller="LoginCtrl" next to ng-click="activeBtn"

Access ng-model in different ion-content

I have the following scenario:
I would like to filter a list and this list is in a different ion-content because i want the search bar to be fixed.
Now the ng.model from the input isn't accessable in the other ion-content. What can I do?
This is my code:
<ion-view>
<ion-content class="no-bgColor" scroll="false" padding="false">
<label class="item item-input">
<span class="input-label">Suche</span>
<input type="text" ng-model="searchBox.storeName">
</label>
</ion-content>
<ion-content class="has-header">
<div class="card-elem animated zoomIn" ng-repeat="cat in myData | filter:searchBox track by cat.storeName">
<h1>{{cat.storeName}}</h1>
<p ng-if="d == 1">Heute: {{cat.openingHours[0]}}</p>
<p ng-if="d == 2">Heute: {{cat.openingHours[1]}}</p>
<p ng-if="d == 3">Heute: {{cat.openingHours[2]}}</p>
<p ng-if="d == 4">Heute: {{cat.openingHours[3]}}</p>
<p ng-if="d == 5">Heute: {{cat.openingHours[4]}}</p>
<p ng-if="d == 6">Heute: {{cat.openingHours[5]}}</p>
<p ng-if="d == 0">Heute: {{cat.openingHours[6]}}</p>
<br>
<h2 ng-click="showAlert(cat.openingHours[0],cat.openingHours[1],cat.openingHours[2],cat.openingHours[3],cat.openingHours[4],cat.openingHours[5],cat.openingHours[6])">Alle Öffnungszeiten</h2>
</div>
</ion-content>
<a href="#home"><div class="bar bar-footer bar-balanced">
<div class="title">Zurück</div>
</div></a>
</ion-view>

just initialize this $scope.searchBox = { storeName: '' }; or $scope.searchBox = { }; in your controller
working example
angular.module('ionicApp', ['ionic'])
.controller('AppCtrl', function($scope, $timeout, $ionicLoading) {
//initialize with a empty value
$scope.searchBox = { };
$scope.stooges = [{
name: 'Moe'
}, {
name: 'Larry'
}, {
name: 'Curly'
}];
});
.bg-smoke,
.bg-smoke label {
background-color: #fafafa;
}
<link href="http://code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<div ng-app="ionicApp">
<div ng-controller="AppCtrl">
<ion-view title="Home">
<ion-header-bar class="bar-stable">
<h1 class="title">Search By Name</h1>
</ion-header-bar>
<ion-content class="bg-smoke" scroll="false" padding="false">
<label class="item item-input">
<span class="input-label">Search</span>
<input type="text" ng-model="searchBox.name">
</label>
</ion-content>
<ion-content class="has-header has-subheader">
<ion-list>
<ion-item ng-repeat="stooge in stooges | filter:searchBox track by stooge.name" href="#">{{stooge.name}}</ion-item>
</ion-list>
</ion-content>
</ion-view>
</div>
</div>

Adding Angular.js Modal gives Error: [$injector:unpr]

So I have an application and it's working great (MEAN stack), and I'm adding in the <script src="/lib/ui-bootstrap-custom-1.3.3.min.js"></script> and <script src="/lib/ui-bootstrap-custom-tpls-1.3.3.min.js"></script> so that I can use the modal.
The code will be below, but here are some explanations first. I've added angular.module('loc8rApp', ['ngRoute', 'ngSanitize', 'ui.bootstrap']); in my angular app declaration. And then in the controller I properly injected it via locationDetailCtrl.$inject = ['$routeParams', '$modal', 'loc8rData'];. I haven't declared an ng-controlleranywhere in the html, so I'm not really sure what the problem may be.
Lastly, a copy of the error:
Error: [$injector:unpr] http://errors.angularjs.org/1.5.5/$injector/unpr?p0=%24modalProvider%20%3C-%20%24modal%20%3C-%20locationDetailCtrl
Below are 4 blocks of code. The first two are locationDetail.controller.js and locationDetail.view.html, the others are the app.js (angular app.js) and index.html.
locationDetail.controller.js
(function() {
angular
.module('loc8rApp')
.controller('locationDetailCtrl', locationDetailCtrl);
locationDetailCtrl.$inject = ['$routeParams', '$modal', 'loc8rData'];
function locationDetailCtrl($routeParams, $modal, loc8rData) {
var vm = this;
vm.locationid = $routeParams.locationid;
loc8rData.locationById(vm.locationid)
.success(function(data) {
vm.data = { location: data };
vm.pageHeader = {
title: vm.data.location.name
};
})
.error(function(e) {
console.log(e);
});
vm.popupReviewForm = function() {
alert("Let's add a review!");
};
}
})();
locationDetail.view.html
<navigation></navigation>
<div class="container">
<page-header content="vm.pageHeader"></page-header>
<div class="row">
<div class="col-xs-12 col-md-9">
<div class="row">
<div class="col-xs-12 col-sm-6">
<p class="rating" rating-stars rating="vm.data.location.rating"></p>
<p>{{ vm.data.location.address }}</p>
<div class="panel panel-primary">
<div class="panel-heading">
<h2 class="panel-title">Opening hours</h2>
</div>
<div class="panel-body">
<p ng-repeat="time in vm.data.location.openingTimes" ng-switch on="time.closed">
{{ time.days }} :
<span class="opening-time" ng-switch-when="true">closed</span>
<span class="opening-time" ng-switch-default>{{ time.opening + " - " + time.closing }}</span>
</p>
</div>
</div>
<div class="panel panel-primary">
<div class="panel-heading">
<h2 class="panel-title">Facilities</h2>
</div>
<div class="panel-body">
<span class="label label-warning label-facility" ng-repeat="facility in vm.data.location.facilities">
<span class="glyphicon glyphicon-ok"></span>
{{ facility }}
</span>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 location-map">
<div class="panel panel-primary">
<div class="panel-heading">
<h2 class="panel-title">Location map</h2>
</div>
<div class="panel-body">
<img src="http://maps.googleapis.com/maps/api/staticmap?center={{ vm.data.location.coords[1] }},{{ vm.data.location.coords[0] }}&zoom=17&size=400x350&sensor=false&markers={{ vm.data.location.coords[1] }},{{ vm.data.location.coords[0] }}&scale=2" class="img-responsive img-rounded">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="panel panel-primary review-panel">
<div class="panel-heading">
<a ng-click="vm.popupReviewForm()" class="btn btn-default pull-right">Add review</a>
<h2 class="panel-title">Customer reviews</h2>
</div>
<div class="panel-body review-container">
<div class="review" ng-repeat="review in vm.data.location.reviews | orderBy:'createdOn':true">
<div class="row">
<div class="well well-sm review-header">
<span class="rating" rating-stars rating="review.rating"></span>
<span class="reviewAuthor">{{ review.author }}</span>
<small class="reviewTimestamp">{{ review.createdOn | date : 'MMMM d yyyy' }}</small>
</div>
<div class="col-xs-12">
<p ng-bind-html="review.reviewText | addHtmlLineBreaks"></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12 col-md-3">
<p class="lead">{{ vm.data.location.name }} is on Loc8r because it has accessible wifi and space to sit down with your laptop and get some work done.</p>
<p>If you've been and you like it - or if you don't - please leave a review to help other people just like you.</p>
</div>
</div>
<footer-generic></footer-generic>
</div>
app.js (angular app.js).
(function() {
angular.module('loc8rApp', ['ngRoute', 'ngSanitize', 'ui.bootstrap']);
function config($routeProvider, $locationProvider) {
$routeProvider
.when('/', {
templateUrl: 'home/home.view.html',
controller: 'homeCtrl',
controllerAs: 'vm'
})
.when('/about', {
templateUrl: '/common/views/genericText.view.html',
controller: 'aboutCtrl',
controllerAs: 'vm'
})
.when('/location/:locationid', {
templateUrl: '/locationDetail/locationDetail.view.html',
controller: 'locationDetailCtrl',
controllerAs: 'vm'
})
.otherwise({redirectTo: '/'});
$locationProvider.html5Mode(true);
}
angular
.module('loc8rApp')
.config(['$routeProvider', '$locationProvider', config]);
})();
index.html
<!DOCTYPE html>
<html ng-app="loc8rApp">
<head>
<meta name="viewport" content="width=device-width", initial-scale="1.0">
<title>Loc8r</title>
<link rel="stylesheet" href="/bootstrap/css/amelia.bootstrap.css">
<link rel="stylesheet" href="/stylesheets/style.css">
<base href="/">
</head>
<body ng-view>
<script src="/angular/angular.min.js"></script>
<script src="/lib/angular-route.min.js"></script>
<script src="/lib/angular-sanitize.min.js"></script>
<script src="/lib/ui-bootstrap-custom-1.3.3.min.js"></script>
<script src="/lib/ui-bootstrap-custom-tpls-1.3.3.min.js"></script>
<script src="/angular/loc8r.min.js"></script>
<script src="/javascripts/jquery-1.12.2.min.js"></script>
<script src="/bootstrap/js/bootstrap.min.js"></script>
<script src="/javascripts/validation.js"></script>
</body>
</html>

Error tells you there is an unknown provider $modalProvider. That means you are injecting $modal and it isn't defined within the app.
The reason is that angular-ui-bootstrap now uses $uib prefix for services.
Try changing $modal to $uibModal and verify in angular-ui-bootstrap docs

ionic ion-scroll scroll parent page

I am developing an app that looks like this:http://codepen.io/anon/pen/vNOVvb
I am using ion-scroll to do horizontal scroll for the list of images. ion-scroll works fine as what I wanted. But the problem is user can't do vertical scroll to the full page when dragging on the ion-scroll.
How can I get the parent page vertical scroll works on ion-scroll?
My sample code as on codepen.io:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<!-- ionic/angularjs js -->
<link href="http://code.ionicframework.com/1.1.0/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.1.0/js/ionic.bundle.js"></script>
<!-- your app's js -->
<!--<script src="js/app.js"></script>
<script src="js/controllers.js"></script>-->
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
<!-- MENU Template -->
<script id="templates/menu.html" type="text/ng-template">
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons side="left">
<button class="button button-icon button-clear ion-navicon" menu-toggle="left">
</button>
</ion-nav-buttons>
</ion-nav-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Left</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item menu-close href="#/app/content1">
Content 1
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</script>
<!-- Content1 Template -->
<script id="templates/content1.html" type="text/ng-template">
<ion-view view-title="Content 1">
<ion-content>
<ion-item>
<div class="item-text-wrap mytitle">Title 1</div>
<ion-scroll direction="x" zooming="false">
<div>
<a class="foodImage" href="#"><div style="background-image: url(http://lorempixel.com/200/200/food?1)"> </div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?2)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?3)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?4)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?5)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?6)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?7)"></div></a>
</div>
</ion-scroll>
<div class="item-text-wrap mytitle">Title 2</div>
<ion-scroll direction="x" zooming="false">
<div>
<a class="foodImage" href="#"><div style="background-image: url(http://lorempixel.com/200/200/food?1)"> </div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?2)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?3)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?4)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?5)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?6)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?7)"></div></a>
</div>
</ion-scroll>
<div class="item-text-wrap mytitle">Title 3</div>
<ion-scroll direction="x" zooming="false">
<div>
<a class="foodImage" href="#"><div style="background-image: url(http://lorempixel.com/200/200/food?1)"> </div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?2)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?3)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?4)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?5)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?6)"></div></a>
<a class="foodImage" href="#"> <div style="background-image: url(http://lorempixel.com/200/200/food?7)"></div></a>
</div>
</ion-scroll>
</ion-item>
</ion-content>
</ion-view>
</script>
</body>
</html>
CSS file
.mytitle{
margin-top:20px;
margin-bottom:20px;
}
.foodImage {
margin-right:10px;
}
.foodImage div{
display: inline-block;
width:200px;
height: 200px;
}
.foodImage div img{
height: 100%;
width: 100%;
}
Javascript:
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
//controller: 'AppCtrl'
})
.state('app.content1', {
url: '/content1',
views: {
'menuContent': {
templateUrl: 'templates/content1.html'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/content1');
});

Just Add this piece of code in your controller.
.controller('sampleviewctrl')
inject this two library in your controller $timeout, $ionicScrollDelegate
$timeout(function(){
var sv = $ionicScrollDelegate.$getByHandle('horizontal').getScrollView();
var container = sv.__container;
var originaltouchStart = sv.touchStart;
var originalmouseDown = sv.mouseDown;
var originaltouchMove = sv.touchMove;
var originalmouseMove = sv.mouseMove;
container.removeEventListener('touchstart', sv.touchStart);
container.removeEventListener('mousedown', sv.mouseDown);
document.removeEventListener('touchmove', sv.touchMove);
document.removeEventListener('mousemove', sv.mousemove);
sv.touchStart = function(e) {
e.preventDefault = function(){}
originaltouchStart.apply(sv, [e]);
}
sv.touchMove = function(e) {
e.preventDefault = function(){}
originaltouchMove.apply(sv, [e]);
}
sv.mouseDown = function(e) {
e.preventDefault = function(){}
originalmouseDown.apply(sv, [e]);
}
sv.mouseMove = function(e) {
e.preventDefault = function(){}
originalmouseMove.apply(sv, [e]);
}
container.addEventListener("touchstart", sv.touchStart, false);
container.addEventListener("mousedown", sv.mouseDown, false);
document.addEventListener("touchmove", sv.touchMove, false);
document.addEventListener("mousemove", sv.mouseMove, false);
});
Html Page should be like this
<ion-scroll has-bouncing="false" direction="x" zooming="false" delegate-handle="horizontal">

Ionic Framework: Can't redirect to another page from my controller?

Having trouble trying to get my app to switch to another page on a click in my controller. If anyone could give me pointer on what I'm missing or doing wrong here it would really be appreciated!
here is my app.js
.config(function ($stateProvider,$urlRouterProvider) {
$stateProvider
.state('login', {
url: '/',
views: {
'login': {
templateUrl : 'index.html',
controller: 'TestCrtl'
}
}
})
.state('userprofile', {
url: '/mainmenu',
templateUrl: 'views/main-menu/main-menu.html'
})
$urlRouterProvider.otherwise('/');
})
.controller('TestCtrl',function($scope, $location) {
$scope.testMove = function($scope, $location) {
console.log("Button was pressed!");
$location.transitionTo('/mainmenu');
}
});
and here is my index.html
<body ng-app="app" animation="slide-left-right-ios7">
<ion-view style="" title="MainMenu">
<div class="bar bar-header bar-assertive">
<h1 class="title">Home</h1>
<a class="button icon-right button-clear ion-gear-a"></a>
</div>
<ion-content style="background-color: #e9efec" class="has-header" scroll="true" padding="true">
<div align="center" style="padding: 15%">
<img style="height: 60px; width: 180px" src="img/digicellogo.png">
</div>
<div style="" class="list card">
<div class="item item-body">
<form >
<label class="item item-input">
<a style="padding-right: 5px" href="">
<img style="height: 50px; width: 50px; " src="img/username-logo.JPG">
</a>
<input type="text" placeholder="DigicelID">
</label>
<label class="item item-input">
<a style="padding-right: 5px" href="">
<img style="height: 50px; width: 50px; " src="img/password-logo.JPG">
</a>
<input type="text" placeholder="Password">
</label>
<div align="right">
<button class="button button-clear button-assertive">
Forgot Password?
</button>
</div>
<a class="button button-block button-assertive" ng-click="testMove()" ng-controller="TestCtrl">
Login
</a>
<button class="button button-block button-assertive">
Sign Up
</button>
</form>
</div>
</div>
</ion-content>
</body>
EDIT:
My Updated controller in App.js:
No longer gives me a "undefined error" but simply does nothing? I don't know if I fully understand how to inject $scope.
.controller('TestCtrl',['$scope', '$state', function($scope, $state) {
$scope.testMove = function() {
console.log("Button was pressed!");
$state.go('userprofile');
};
}])

Try using $state.go('userprofile');
instead of location.transitionTo('/mainmenu');
(remember to inject $state into your controller to test this)