angular-leaflet-directive example fiddle

http://angularjs.org/

HTML

<script src="http://tombatossals.github.io/angular-openlayers-directive/bower_components/openlayers3/build/ol.js"></script>
<script src="http://tombatossals.github.io/angular-openlayers-directive/bower_components/angular/angular.min.js"></script>
<link rel="stylesheet" href="http://tombatossals.github.io/angular-openlayers-directive/bower_components/openlayers3/build/ol.css">
<script src="http://tombatossals.github.io/angular-openlayers-directive/bower_components/angular-sanitize/angular-sanitize.min.js"></script>
<script src="https://rawgit.com/tombatossals/angular-openlayers-directive/latest/dist/angular-openlayers-directive.min.js"></script>
<body ng-controller="GeoJSONController">
     <openlayers ol-center="center" ol-defaults="defaults" height="100%">
         <ol-layer ol-layer-properties="geojson"></ol-layer>
     </openlayers>
     <div id="countrybox" class="info country f32">
        <div ng-show="selectedCountry" class="flag" ng-class="selectedCountry['alpha-2']|lowercase"></div>
        {{ selectedCountry.name || 'No country'}}
     </div>
  </body>

CSS

html, body {
            height: 98.5%;
        }
        .info {
            background-color: #fff;
            border: 2px #444 solid;
            border-radius: 7px;
            -webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
            -moz-box-shadow:    4px 4px 5px 0px rgba(50, 50, 50, 0.75);
            box-shadow:         4px 4px 5px 0px rgba(50, 50, 50, 0.75);
            color: #111;
            font-size: 32px;
            position: absolute;
            bottom: 1em;
            left: 1em;
            z-index: 100;
            font-weight: bold;
            padding: .2em .5em;
            white-space: nowrap;
            line-height: 1.1em;
            text-align: center;
            z-index: 100;
        }
        .info:before {
            border-top: 6px solid transparent;
            border-bottom: 6px solid transparent;
            content: "";
            border-right: 6px solid black;
            border-right-color: inherit;
            position: absolute;
            left: -8px;
            top: 20px;
        }

JavaScript

var app = angular.module("demoapp", ["openlayers-directive"]);
      var overlay;
      app.controller("GeoJSONController", [ '$scope', '$http', 'olData', 'olHelpers', function($scope, $http, olData, olHelpers) {
        var continentProperties= {
            "009": {
                    name: 'Oceania',
                    colors: [ '#CC0066', '#993366', '#990066', '#CC3399', '#CC6699' ]
            },
            "019": {
                    name: 'America',
                    colors: [ '#006699', '#336666', '#003366', '#3399CC', '#6699CC' ]
            },
            "150": {
                    name: 'Europe',
                    colors: [ '#FF0000', '#CC3333', '#990000', '#FF3333', '#FF6666' ]
            },
            "002": {
                    name: 'Africa',
                    colors: [ '#00CC00', '#339933', '#009900', '#33FF33', '#66FF66' ]
            },
            "142": {
                    name: 'Asia',
                    colors: [ '#FFCC00', '#CC9933', '#999900', '#FFCC33', '#FFCC66' ]
            }
        };
        // Get a country paint color from the continents array of colors
        var getColor = function(country) {
            if (!country || !country["region-code"]) {
                return "#FFF";
            }
            var colors = continentProperties[country["region-code"]].colors;
            var index = country["alpha-3"].charCodeAt(0) % colors.length ;
            return colors[index];
        };
        var getStyle = function(feature) {
            var style = olHelpers.createStyle({
                fill: {
                    color: getColor($scope.countries[feature.getId()]),
                    opacity: 0.4
                },
                stroke: {
                    color: 'white',
                    width: 3
                }
            });
            return [ style ];
        };
        angular.extend($scope, {
            center: {
                lat: 30,
                lon: 0,
                zoom: 2
   ...