Google Polymer - Iron Pages/Selector not updating main field - polymer-1.0

I'm cutting my teeth with Google Polymer by trying to put together a control panel style layout but unfortunately when clicking on items in my app-drawer the content doesn't load in the main field. The url updates in the bar and the CSS highlights the selection but nothing else happens.
I started with a blank app template using polymer init, tried to flesh out the structure by referencing this answer, and then referenced the starter-kit as a guide for the rest. If anyone could give me a nudge in the right direction it would be greatly appreciated as i'm still new to the concepts of routing.
<dom-module id="Panel-app">
:host {
display: block;
font-family: Fira Sans Condensed;
--app-primary-color: #1A3663;
app-header {
background-color: var(--app-primary-color);
color: white;
app-drawer {
top: 64px;
--app-drawer-content-container: {
padding: 0px;
background-color: #325999;
.drawer-list {
margin: 0 20px;
.drawer-list a {
display: block;
padding: 0 16px;
text-decoration: none;
color: var(--app-secondary-color);
line-height: 40px;
.drawer-list a.iron-selected {
color: black;
font-weight: bold;
<app-location route="{{route}}"></app-location>
<app-header-layout fullbleed>
<app-header shadow>
<app-toolbar id="toolbar">
<paper-icon-button icon="menu" onclick="drawer.toggle()"></paper-icon-button>
<div main-title>Panel</div>
<paper-icon-button icon="communication:live-help" class="dropdown-trigger"></paper-icon-button>
<paper-menu class="dropdown-content">
<paper-item>Live Chat</paper-item>
<paper-item>Contact List</paper-item>
<paper-item>Leave Feedback</paper-item>
<paper-icon-button icon="supervisor-account" class="dropdown-trigger"></paper-icon-button>
<paper-icon-button icon="settings" class="dropdown-trigger"></paper-icon-button>
<app-drawer id="drawer">
<iron-selector selected="[[page]]" attr-for-selected="name" class="drawer-list" role="navigation">
<a name="view1" href="/view1">One</a>
<a name="view2" href="/view2">Two</a>
<a name="view3" href="/view3">Three</a>
<my-view1 name="view1"></my-view1>
<my-view2 name="view2"></my-view2>
<my-view3 name="view3"></my-view3>
is: 'Panel-app',
properties: {
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged',
observers: [
_routePageChanged: function(page) { = page || 'view1';
if (!this.$.drawer.persistent) {
_pageChanged: function(page) {
// Load page import on demand. Show 404 page if fails
var resolvedPageUrl = this.resolveUrl('my-' + page + '.html');
this.importHref(resolvedPageUrl, null, this._showPage404, true);
_showPage404: function() { = 'view404';

You're missing a curly bracket here or else the binding fails:
It must be
Then the _routePageChanged observer works


I want to show a modal window on selecting a list item in angular js

I want to show a pop up window when a user selects an element from the dropdown list. But instead im getting a plain text no modal window is being shown. Please help: below is the referece for my code-
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.value = '';
$scope.accntDetails = {
accnt01: { bankName: "HDFC", bankbranch: "delhi", accntNumber: "12345" },
accnt02: { bankName: "ICICI", bankbranch: "mumbai", accntNumber: "12346" },
accnt03: { bankName: "IDBI", bankbranch: "pune", accntNumber: "12347" }
$scope.modalShown = false;
$scope.toggleModal = function() {
$scope.modalShown = true;
$scope.changedValue = function(bank) {
$scope.value = bank.bankName;
angular.module('myApp').directive('modalDialog', function() {
return {
restrict: 'E',
scope: {
show: '='
transclude: true,
link: function(scope, element, attrs) {
console.log('attrs: ', attrs);
scope.dialogStyle = {};
if (attrs.boxWidth) {
scope.dialogStyle.width = attrs.boxWidth;
if (attrs.boxHeight) {
scope.dialogStyle.height = attrs.boxHeight;
scope.hideModal = function() {
scope.modalShown = false;
template: `<div class='ng-modal' ng-show='modalShown'>
<div class='ng-modal-overlay' ng-click='hideModal()'></div>
<div class='ng-modal-dialog' ng-style='dialogStyle'>
<div class='ng-modal-close' ng-click='hideModal()'>X</div>
<div class='ng-modal-dialog-content' ng-transclude></div>
/* Custom CSS- this is the css code for showing up a modal */
.ng-modal-overlay {
/* A dark translucent div that covers the whole screen */
position: absolute;
z-index: 9999;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #808080;
opacity: 0.8;
.ng-modal-dialog {
background-color: #fff;
box-shadow: 10px 10px #595554;
border-radius: 4px;
z-index: 10000;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
.ng-modal-dialog-content {
padding: 10px;
text-align: left;
.ng-modal-close {
position: absolute;
top: 3px;
right: 5px;
padding: 5px;
cursor: pointer;
font-size: 120%;
display: inline-block;
font-weight: bold;
font-family: 'arial', 'sans-serif';
<div ng-app="myApp" ng-controller="myCtrl">
<p>Select account number:</p>
<!-- <select ng-model="accnt" ng-options="y.bankName for (x, y) in accntDetails">
</select> -->
<select ng-model="bankSelected" ng-change=" toggleModal();"
data-ng-options="bank as bank.bankName for bank in accntDetails">
<option value="">Select Account</option>
<h1>You selected: {{bankSelected.bankName}}</h1>
<h2>branch: {{bankSelected.bankbranch}}</h2>
<h3>Number: {{bankSelected.accntNumber}}</h3>
<div ng-show="modalShown">
<modal-dialog box-width="400px" box-height="150px">
<div class="row">
<div class="col-md-12">
<hr style="border-top:1px solid darkblue" />
<div class="row">
<div class="col-md-12">
This is an important message
when a user click on any element of the list a modal window should popup. I have tried this code. If i use it onClick event it works fine the modal opens but if i use it with ng-select it doesnt works:
Okay, I think there are two problems here. One is that your JSON is not valid to run on a repeat. It should be an array of Object to get the details. I was able to run the same when I tried that with the JSON as :
like accntDetails = [{BankDetails1},{BankDetails2},{BankDetails}]

Uncaught Error: [$injector:nomod]

i am using below code. But i am getting error Uncaught Error: [$injector:nomod]. The module name is same. Not sure why i am getting this error. Please help. i checked the syntax, names etc everywhere but could not find any issues. it seems like i missed something simple but not able to figure out where exactly i made a mistake.
angular.module("demo").controller("SimpleDemoController", function($scope) {
$scope.models = {
selected: null,
lists: {"A": [], "B": []}
// Generate initial model
for (var i = 1; i <= 3; ++i) {
$scope.models.lists.A.push({label: "Item A" + i});
$scope.models.lists.B.push({label: "Item B" + i});
// Model to JSON for demo purpose
$scope.$watch('models', function(model) {
$scope.modelAsJson = angular.toJson(model, true);
}, true);
* The dnd-list should always have a min-height,
* otherwise you can't drop to it once it's empty
.simpleDemo ul[dnd-list] {
min-height: 42px;
padding-left: 0px;
* The dndDraggingSource class will be applied to
* the source element of a drag operation. It makes
* sense to hide it to give the user the feeling
* that he's actually moving it.
.simpleDemo ul[dnd-list] .dndDraggingSource {
display: none;
* An element with .dndPlaceholder class will be
* added to the dnd-list while the user is dragging
* over it.
.simpleDemo ul[dnd-list] .dndPlaceholder {
background-color: #ddd;
display: block;
min-height: 42px;
.simpleDemo ul[dnd-list] li {
background-color: #fff;
border: 1px solid #ddd;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
* Show selected elements in green
.simpleDemo ul[dnd-list] li.selected {
background-color: #dff0d8;
color: #3c763d;
<!DOCTYPE html>
<script src=""></script>
<script src="./angular-drag-and-drop-lists.js"></script>
<body ng-app="demo">
<!-- The dnd-list directive allows to drop elements into it. The dropped data will be added to the referenced list -->
<ul dnd-list="list">
<!-- The dnd-draggable directive makes an element draggable and will transfer the object that was assigned to it. If an element was dragged away, you have to remove it from the original list yourself using the dnd-moved attribute -->
<li ng-repeat="item in list"
dnd-moved="list.splice($index, 1)"
dnd-selected="models.selected = item"
ng-class="{'selected': models.selected === item}">
Your module should have an empty dependencies injected
angular.module("demo",[]).controller("SimpleDemoController", function($scope) {

Does Angular Material have predetailed textboxes (ala bootstrap alert)

Been playing around with angular material, and absolutely love it. But found one rather surprising thing, and almost certain I missed a page in the manual, or well, many pages including that one.
Thought I would add a warning text along the lines of "Thats not your password" for failed login. And from bootstrap I could easily do this with and alert box.
<div class="alert alert-danger" role="alert">
<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
<span class="sr-only">Error:</span>
Enter a valid email address
However, I can't find a similar set for angular material. Yes, there are dialog, and toasts, but I wanted something simpler.
And yes I could write my own class, but it feels like there should be some predefined class for it?
I've been looking for such a feature too. The closest thing I can find is md-whiteframe. You can do an Angular Material type alert like this:
<div layout="row" layout-padding layout-wrap layout-fill>
<div md-whiteframe="3" class="padded">
Some text here
However, the md-warn class doesn't work with this directive.
as far i can see now there's no alert box in angular material like bootstrap
so i extract only alert css role from bootstrap
.alert {
padding: 1rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: 5px; }
.alert-heading {
color: inherit; }
.alert-link {
font-weight: bold; }
.alert-dismissible {
padding-right: 2rem; }
.alert-dismissible .close {
position: relative;
top: -.125rem;
right: -1rem;
color: inherit; }
.alert-success {
background-color: #dff0d8;
border-color: #d0e9c6;
color: #3c763d; }
.alert-success hr {
border-top-color: #c1e2b3; }
.alert-success .alert-link {
color: #2b542c; }
.alert-info {
background-color: #d9edf7;
border-color: #bcdff1;
color: #31708f; }
.alert-info hr {
border-top-color: #a6d5ec; }
.alert-info .alert-link {
color: #245269; }
.alert-warning {
background-color: #fcf8e3;
border-color: #faf2cc;
color: #8a6d3b; }
.alert-warning hr {
border-top-color: #f7ecb5; }
.alert-warning .alert-link {
color: #66512c; }
.alert-danger {
background-color: #f2dede;
border-color: #ebcccc;
color: #a94442; }
.alert-danger hr {
border-top-color: #e4b9b9; }
.alert-danger .alert-link {
color: #843534; }
Yes Angular Material has Dialog, you can use Alert Dialog, documentation here
Add $mdDialog to your controller as dependency and customise below code.
$scope.showAlert = function(ev) {
.title('This is an alert title')
.textContent('You can specify some description text in here.')
.ariaLabel('Alert Dialog Demo')
.ok('Got it!')
Call showAlert() from your html
<md-button class="md-primary md-raised" ng-click="showAlert($event)" flex="100" flex-gt-md="auto">
Alert Dialog

How to detect multi finger touch in ionic app

I am developing an Ionic app.In that I want to apply 1 finger swipe and 2 finger swipe and 3 finger swipe ( If it is possible ).
In a div if user swipes with single finger, it should scroll and
If user swipes with multi finger , it should select the content and select,copy options should be shown and 3 finger swipe for one more action.
I checked the question before posting this question.I am able to detect multi touch but not 2finger / 3 finger swipe. I am looking for any plugins for this actions.
Help me in this issue.
Look how 4-touch for reload is implemented in the Phonegap Developer App:
var currentTouches = {},
eventName = { touchstart: 'touchstart', touchend: 'touchend' };
if (window.navigator.msPointerEnabled) {
eventName = { touchstart: 'MSPointerDown', touchend: 'MSPointerUp' };
document.addEventListener(eventName.touchstart, function(evt) {
var touches = evt.touches || [evt],
for(var i = 0, l = touches.length; i < l; i++) {
touch = touches[i];
currentTouches[touch.identifier || touch.pointerId] = touch;
document.addEventListener(eventName.touchend, function(evt) {
var touchCount = Object.keys(currentTouches).length;
currentTouches = {};
if (touchCount === 4) {
}, false);
Hope this helps.
I am not quite sure but you might try adding a jQuery plugin
jGestures that enables you to add gesture events such as 'pinch', 'rotate', 'swipe', 'tap' and 'orientationchange' just like native jQuery events. Includes event substitution: a "tapone" event can be triggered by "clicking", a "swipe" by performing a swipe-ish mousegesture.
try this one for more
angular.module('ionicApp', ['ionic'])
.controller('MainCtrl', function($scope, $ionicGesture) {
$scope.messages = [];
var touchpad = angular.element(document.querySelector('#touchpad'));
var maxFingers = 10;
var fingers = [];
for(var i=0; i<maxFingers; i++) fingers.push(angular.element(document.querySelector('#t'+i)))
$scope.touches = new Array;
var resetTransformations = function(){
for(var i=0;i<maxFingers;i++)
fingers[i].css({"transform": "translate3D(0px, 0px, 0px)"});
function (event) {
$scope.messages.push({txt: "dragstart"});
}, touchpad);
function (event) {
$scope.messages.push({txt: "dragend"});
}, touchpad);
function (event) {
$scope.messages.push({txt: "transformstart"});
}, touchpad);
function (event) {
$scope.messages.push({txt: "transformend"});
}, touchpad);
// keep track if a finger is released:
var fingersDown = 0;
// drag = 1 finger, transform = more
$ionicGesture.on('transform drag',
function (event) {
if(fingersDown > event.gesture.touches.length)
fingersDown = event.gesture.touches.length;
$scope.touches = [];
var identifier = 0;
for(var i=0; i<event.gesture.touches.length; i++){
identifier = parseInt(event.gesture.touches[i].identifier);
$scope.touches[i] = {pageX: parseInt(event.gesture.touches[i].pageX), pageY: parseInt(event.gesture.touches[i].pageY), id: identifier};
fingers[identifier].css({"transform": "translate3D("+event.gesture.touches[i].pageX+"px, "+event.gesture.touches[i].pageY+"px, 0px)"});
}, touchpad);
function (event) {
$scope.touches = [];
$scope.messages.push({txt: "release"});
}, touchpad);
function (event) {
$scope.messages.push({txt: "touch"});
}, touchpad);
body {
cursor: url(''), auto;
width: 100%;
height: 100%;
color: #FFF;
position: absolute;
top: 0px;
left: 0px;
z-index: 10;
color: #fff;
padding-left: 10px;
font-size: 12px;
line-height: 12px;
position: absolute;
color: #fff;
top: -44px;
left: 0px;
margin-left: -30px;
margin-top: -30px;
width: 60px;
height: 60px;
border-radius: 30px;
background: rgba(255,255,255,0.62);
padding-top: 38%;
z-index: 1;
position: absolute;
background: url("");
background-size: cover;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
<html ng-app="ionicApp">
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>VELOCITY + IONIC</title>
<!-- add touch emulation hold SHIFT-key while using the mouse -->
<script src=""></script>
<link href="//" rel="stylesheet">
<script src="//"></script>
<body ng-controller="MainCtrl">
<ion-header-bar class="bar-positive">
<h1 class="title">TRACKING MANY FINGERS</h1>
<ion-content class="full" scroll="false">
<h4 id="touchpad" class="full padding">Drag below with > 1 fingers.<br />Press and hold Shift + mouse key to emulate multitouch on a computer.</h4>
<div class="full world padding">
<div id="container">
<div class="debug" ng-repeat="touch in touches">
touches[{{$index}}] = FINGER <strong>{{}}</strong>: ({{touch.pageX}}, {{touch.pageY}})
<div class="debug" ng-repeat="msg in messages">{{msg.txt}}</div>
<div id="t0" class="circle">0</div>
<div id="t1" class="circle">1</div>
<div id="t2" class="circle">2</div>
<div id="t3" class="circle">3</div>
<div id="t4" class="circle">4</div>
<div id="t5" class="circle">5</div>
<div id="t6" class="circle">5</div>
<div id="t7" class="circle">7</div>
<div id="t8" class="circle">8</div>
<div id="t9" class="circle">9</div>

AngularJS directives with HTML5 drag and drop -- issue with scope object

I'm fairly new to angular and I'm having a hard time wrapping my head around where the items are being pushed to. I am not sure if I am correctly setting up the functions to be used with drag/drop and if its getting bound to an older scope object and the ng-repeat isn't being updated properly. I'm thinking there is some slight issue with the way I have this setup. Any pointers or help would be much appreciated.
What should happen is when you drag a color from the Draggable container into the Droppable container it should update the text which is linked to the scope object items. I am successfully pushing an item onto the scope object but ng-repeat isn't picking it up. I am not sure if I need a watch or what to do to get it to pay attention to the newly added items.
JS Fiddle Here:
<div ng-app="my-app" ng-controller="MainController">
<div class="container">
<div draggable="true" ng-repeat="drag_type in drag_types">{{}}</div>
<div class="container">
<header><h1>Drop Schtuff Here</h1></header>
<section droppable="true">
<div><span>You dragged in: </span><span ng-repeat="items in items">{{}},</span></div>
var module = angular.module('my-app', []);
module.directive('draggable', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element[0].addEventListener('dragstart', scope.handleDragStart, false);
element[0].addEventListener('dragend', scope.handleDragEnd, false);
module.directive('droppable', function () {
return {
restrict: 'A',
link: function (scope, element, attrs) {
element[0].addEventListener('drop', scope.handleDrop, false);
element[0].addEventListener('dragover', scope.handleDragOver, false);
function MainController($scope)
$scope.drag_types = [
{name: "Blue"},
{name: "Red"},
{name: "Green"},
$scope.items = [];
$scope.handleDragStart = function(e){ = '0.4';
e.dataTransfer.setData('text/plain', this.innerHTML);
$scope.handleDragEnd = function(e){ = '1.0';
$scope.handleDrop = function(e){
var dataText = e.dataTransfer.getData('text/plain');
$scope.handleDragOver = function (e) {
e.preventDefault(); // Necessary. Allows us to drop.
e.dataTransfer.dropEffect = 'move'; // See the section on the DataTransfer object.
return false;
CSS (if anyone cares)
.container {
width: 600px;
border: 1px solid #CCC;
box-shadow: 0 1px 5px #CCC;
border-radius: 5px;
font-family: verdana;
margin: 25px auto;
.container header {
background: #f1f1f1;
background-image: -webkit-linear-gradient( top, #f1f1f1, #CCC );
background-image: -ms-linear-gradient( top, #f1f1f1, #CCC );
background-image: -moz-linear-gradient( top, #f1f1f1, #CCC );
background-image: -o-linear-gradient( top, #f1f1f1, #CCC );
box-shadow: 0 1px 2px #888;
padding: 10px;
.container h1 {
padding: 0;
margin: 0;
font-size: 16px;
font-weight: normal;
text-shadow: 0 1px 2px white;
color: #888;
text-align: center;
.container section {
padding: 10px 30px;
font-size: 12px;
line-height: 175%;
color: #333;
There are a couple of typos in the fiddle, but the basic problem is that your drag events are outside an angular digest cycle. You should wrap your changes in $scope.$apply (code sample coming). This forked and bugfixed (FIDDLE) shows that when you click the button, angular shows the changes and refreshes the display with new values.
$scope.$apply(function() {
A bug you had is in this code:
<span ng-repeat="items in items">{{}},</span>
This should probably be ng-repeat="item in items", also items only contains the dropped text so it is an array of strings and not the original item objects.