Angular: MapBox

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://api.tiles.mapbox.com/mapbox.js/v2.1.8/mapbox.css">
<!-- ==== LIBRARIES === -->
<!-- jquery 2.1.4-->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<!-- angular 1.4.0 -->
<script src="https://code.angularjs.org/1.4.0-rc.0/angular.js"></script>
<!-- react 0.13.3 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.3/react.min.js"></script>
<!-- MapBox -->
<script src='https://api.tiles.mapbox.com/mapbox.js/v2.1.8/mapbox.js'></script>
<!-- Bootstrap -->
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'></script>




<div style="position:absolute; top:0; bottom:0; width:100%; overflow: hidden;">  
    
   <!-- MAPBOX DIRECTIVE -->     
   <mapbox-element id="map"></mapbox-element>  

    <!-- LEFT PANEL --> 
   <div ng-controller="PanelController as PnlCtrl">
    <div style="position:fixed; left:0px; 
                height:300px; width:160px;" 
	     class="panel panel-primary slideRight">
	               
		<div class="panel-body"  
			 style="padding:0px;
                    overflow-y: scroll; height:100%; 
                    -webkit-overflow-scrolling:touch;">
			 				 		 
		   <div>		
             <!-- REACT ELEMENT --> 
			 <poi-list list="PnlCtrl.getList()"/>
           </div>

		</div>
    </div>
  </div>    
</div>    


<!-- ng-React -->	 
<script>
(function(n,t){"undefined"!=typeof module&&module.exports?module.exports=t(require("react"),require("angular")):"function"==typeof define&&define.amd?define(["react","angular"],function(e,angular){return n.ngReact=t(e,angular)}):n.ngReact=t(n.React,n.angular)})(this,function(React,angular){"use strict";function n(n,t){if(angular.isFunction(n))return n;if(!n)throw Error("ReactComponent name attribute must be specified");var e;try{e=t.get(n)}catch(r){}if(!e)try{e=n.split(".").reduce(function(n,t){return...

JavaScript

var myApp = angular.module('myApp',['react']);


/*==== LEFT PANEL CONTROLLER =======*/
myApp.controller('PanelController', ['$rootScope', function($rootScope)
{ 
   $rootScope.panelController = this;
   this.list =[]; 
   var self = this;
   this.getList = function(){return self.list;}	
}]);

/*==== REACT ELEMENT =======*/
myApp.value( "PoiList", React.createClass( {

  propTypes : 
    { list: React.PropTypes.object.isRequired },

  render: function() 
   {
    var pois = this.props.list.map( function( poi, index ) 
    	{
	     // prepare style of the button
     	 var btnStyle = {
			  height:'100%',
			  width: '100%',
			  textAlign: 'left'
			};
	     
		 var title = poi.feature.properties.title;
         return React.DOM.button( 
               {key: index,
	            className: 'btn btn-default',
	            style: btnStyle
	            }, title
                                 ); 
        } );
    return React.DOM.div({}, pois);
    }
    
         
}))

.directive( 'poiList', function( reactDirective ) {
  return reactDirective( 'PoiList' );
} );



/*==== MAPBOX ELEMENT DIRECTIVE =======*/
myApp.directive('mapboxElement', function() {
  return {
	scope: { id: '@id' },
    replace:true,
    controller : ['$rootScope', function($rootScope) 
                  {
                   this.pushMarker = function(marker)
					 	{ 
 $rootScope.panelController.list.push(marker);	
					 	}
                   this.getList = function()
					 	{ 
				   return $rootScope.mapController.list;	
					 	}       
                   this.digest = function()
                   {$rootScope.$apply();} // force digest
                  }
                 ], 
	controllerAs : 'ctrl',      
	link: function(scope, element, attr, ctrl)
	        {
		     L.mapbox.accessToken = 'pk.eyJ1IjoiZGUtbGFjIiwiYSI6Ik1rMXhaNEEifQ.8c-pVM7gL3313zIWLwS7WQ';
			 var map = L.mapbox.map(scope.id, 'mapbox.streets', { zoomControl: false });
			 map.addControl(new L.Control.Zoom({ position:...