Map built using leaflet API. From: https://github.com/tombatossals/angular-leaflet-directive/tree/master/examples

<!DOCTYPE html>
<html ng-app="Map">

<head>
<!--Leaflet API for OSM-->
  <link rel="stylesheet" href="leaflet-styles.css" />
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
  <script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>

<!--AngularBootstrap-->  
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
  <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">

<!--my code-->
  <script src="script.js"></script>
</head>

<body ng-controller="MapCtrl">
  <searching-form></searching-form>
  <br>
  <div id='myMap' style="margin-left:15%; width:50%; height:300px"></div>
</body>

</html>

var mapApp = angular.module("Map", ['ui.bootstrap'])

mapApp.service('GeocodingService', function($q, $http, $window) {
  return {

    getGPSCoordinates: function(country, city) {
      var deferred = $q.defer();

      var url = "http://nominatim.openstreetmap.org/search?format=json&city=" + city + "&country=" + country;

      $http.get(url).success(function(gpsJSON) {
        if (gpsJSON.length == 0) {
          var request = {
            error: "Bad country or city. "
          };

        } else {
          var request = {
            lat: gpsJSON[0].lat,
            lng: gpsJSON[0].lon,
            zoom: 12
          };

        }
        
        deferred.resolve(request);
        
      });
      return deferred.promise;
    }
  };
});

mapApp.controller('MapCtrl', function($rootScope, $scope, GeocodingService) {
  $scope.search = function() {


    GeocodingService.getGPSCoordinates($scope.country, $scope.city)
      .then(function(request) {

        if (request.error == null) {
          if ($scope.map == null)
            $scope.map = new L.Map('myMap');
            $scope.error = null;

          // create the tile layer with correct attribution
          var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
          var osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
          var osm = new L.TileLayer(osmUrl, {
            attribution: osmAttrib
          });

          $scope.map.setView(
            new L.LatLng(
              request.lat,
              request.lng),
            request.zoom);

          $scope.map.addLayer(osm);

        } else {

          $scope.error = request.error;

        }

      });
  };
});

mapApp.directive('searchingForm', function() {
  return {
    restrict: 'E',
    replace: true,
    templateUrl: "searching-form.html"
  };
});

My intention was built a map using angularJS and introducing postal address.

Examples from: 
https://github.com/tombatossals/angular-leaflet-directive/tree/master/examples

<div class="container">
  <h1>Searching Form.</h1>
  <h3>Introduce a country and a city and click on the button.</h3>
  <form name="loginForm" class="form-horizontal">

    <!-- why $parent? -->
    <!-- This is becouse angular-ui.bootstrap use child scope -->
    <!-- and to "scape" from there we have to use parent scope -->

    <div class="form-group">
      <div class="col-xs-5 col-lg-10">
        <label class="control-label">Country:</label>
        <input ng-model="$parent.country" popover="Enter a country name" popover-trigger="mouseenter" type="text" class="form-control" placeholder="Enter a country name" autofocus required/>
      </div>

      <div class="row col-xs-5 col-lg-10">
        <label class="control-label">City:</label>
        <input ng-model="$parent.city" popover="Enter a city name" popover-trigger="mouseenter" type="text" class="form-control" placeholder="Enter a city name" autofocus required/>
      </div>

    </div>

    <button ng-disabled="loginForm.$invalid" class="btn btn-primary" ng-click="search()">Search</button>
    <alert ng-show="error">Error: {{error}}</alert>
 
  </form>
</div>