Mobiscroll Demo - mobiscroll

I am looking at the demo of MobiScroll and have chosen the following options:
Demo Page: Demo
Demo: Time
Display: Modal
Mode: Scroller
The demo example shows the resulting HTML I should use as:
<input id="i" name="i" />
When I use this HTML, the Show and Clear buttons show up on the page and when I click in the input box, the Mobiscroll shows up inline. In the demo, these buttons appear with the Mobiscroll in a modal dialog. Do I need to wrap the HTML in a div with a special tag?

The issue was that the jQuery Mobile js + css files were required to get the modal popup. The directions on the site are not clear! I added the following and presto!
<script src=""></script>
<link rel="stylesheet" href="" />


Calling a function when we click out side in angular popover

I am working on a UI task to display a popover when i click on a link. Once i click outside the popover, it will close. But while clicking on the link i am adding CSS styles to the link. When the popover is closed i want the applied css to be removed from the link. Any suggestions
<div class="popover-border" uib-popover-template="'template.html'" popover-
placement="bottom" popover-trigger="'outsideClick'" popover-class="test-
Template for the popover content
<script type="text/ng-template" id="template.html">
<h1> Hello</h1>
Try changing:
Working example is here

AngularUI Bootstrap: Parse HTML in carousel text

I'm trying to implement an Angular UI Bootstrap Carousel and have HTML in the texts. Thought I could use something like
text: $sce.trustAsHtml('Nice image <br />test')
but apparently that doesn't work and I've no clue why.
Plunkr: (fork of the offical example from the docs).
Use ng-bind-html directive to display html content on view
<p ng-bind-html="slide.text"></p>
Demo Plunkr

ng-map and place autocomplete not working in modal

I am using ng-map directive and place autocomplete API in my angularjs application. which are working fine.
but the problem is I need Both in a bootstrap modal and when i am using same code in a bootstrap modal, Nothing is working neither ng-map nor place autocomplete.
Suggest me if I am missing something.
problem occures only when i use angular's ng-map directive. With javascript everything works fine but I don't want to write bulk of code. I wanna use ng-map only.
Here is my markup
<ng-map zoom="8">
<marker visible="true" centered="true" position="current-location" title="You are Here" draggable="true"></marker>
<marker visible="true" centered="true" position="{{}}" title="You are looking for this" draggable="true"></marker>
<marker ng-repeat="c in vm.cities" position="{{c.pos}}" title="{{}}" id="{{}}" on-click="vm.showCity(event, c)"></marker>
see my
for whole code
Since the map is displayed in bootstrap modal, the map needs to be explicitly intialized once the modal dialog is opened as demonstrated below:
$('#myModal').on('', function(e) {
$timeout(function() {
google.maps.event.trigger(vm.dialogMap, 'resize');
'' event is triggered once the modal is opened.
From another hand, unfortunately angularjs-google-maps at the moment contains a bug that prevents the route to be printed if multiple map instances are added into a page (in your example there are two map instances)
In the below example is provided a workaround.
Working example
The following forked plunker demonstrates how to:
properly display map in modal dialog
print routes in multiple map instances
add a style
.pac-container { z-index: 10000 !important; }
ref from there
Google Places Autocomplete not showing up
here a plnkr for a your working example

Angular js - slide in div on click of element

I am completely new to Angular js and I want to perform an operation i.e. clicking on a button would slide in a div from the right and clicking back again would send it back to right. Basically toggle it.
I know how to do with jquery as below, but the need is to do it in angular.
Click me
<div id="content">
<div id="list">
#clickhere {display:block; width:50px; height:50px; background:#999;}
#list{width:200px; height:100%; position:absolute;top:0;right:-200px;background:#323232;}
$("#clickhere").click( function(){
if($("#list").css("right")== "0px")
$("#list").animate({right:"-200px"}) }
jsfiddle -
Can anyone please help me with the angular code. I looked over a couple of examples such as :
1) Different transitions with AngularJS
2) - in section Slide, 2nd button
The above links represent my actual need. I tried doing it via 1st link, but its not working.
Hint : add or remove a class (ngClass or ngHide) when the user click on the button (ngClick) and do the animation in CSS (transition).

How to open an angularjs page as a popup from another angularjs page

I have 2 CakePHP pages. Both of them use angularjs. Here's a snippet.
<div id="ng-app" ng-app>`
<div ng-controller="ItemController">
the function showAddPopup is defined as follows
$scope.showAddPopup = function() {
$.colorbox({href:'/items/add/' + $,open:true,close : "x", onClosed:function(){}});
<div id="ng-app" ng-app>`
<div ng-controller="AddController">
Now, when I click on the add link from items view, I get a popup with the contents of add.ctp. But the problem is that instead of showing order label say 'My Order', the h2 tag is showing {{order.label}}
When I open add view from a page that doesn't use angularjs I get a proper result. What am I doing wrong. Please help. I have already wasted many days on this.
Maybe opening the colorbox with setting iframe could be the solution, if the problem is nested ng-apps.
$.colorbox({inline:false; iframe:true;href:'/items/add/'...});
If you are using bootstrap then angular-ui would be a great choice for above scenario