JSFiddle - React, Tailwind, and code Playground

by Berguiga

HTML

<script src="https://code.angularjs.org/1.4.4/angular.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<div ng-app='MyModule'>
    <div ng-controller='MyCtrl'>
        <b>Access current weather data for any location on Earth</b><br/>
        Name of Country: <input auto-complete ui-items="names" ng-model="selected">
         <br/><br/>
        <div>
            <b>weather</b><br/>
            <p>description: {{desc}}</p><br/>
            <b>Temperature(K°)</b><br/>
            <p>Max: {{tmpMax}}</p><br/>
            <p>Min: {{tmpMin}}</p><br/>
        </div>  
     </div>
</div>

JavaScript

//Module and Directive
var myApp = angular.module('MyModule',[]);
myApp.directive('autoComplete', function($timeout,myService) {
    return {
        	require: 'ngModel',
        	link : function(scope, element, attrs, modelCtrl){
                element.autocomplete({
                    source: scope[attrs.uiItems],
                    select: function() {
                        $timeout(function() {
                          element.trigger('input');
                        }, 0);
                        function getData(inputValue){
                            console.log("inputValue "+inputValue);
                               myService.cityData(scope,inputValue).then(
                                function(data){
                                    scope.desc = data.weather[0].description;
                                    scope.tmpMax = data.main.temp_max;
                                    scope.tmpMin = data.main.temp_min;
                                },        
                                function(status){
                                    console.log("22");
                                }   
                                );//End get Data City                        
                        }
                        modelCtrl.$parsers.push(getData);
                    }
                });            
            }//End function link
    };//End Return
});

//Service
myApp.factory('myService', function($http,$q) {

    var factory ={
        backData : false,
        cityData:function($scope,inputValue){
            var deferred = $q.defer();
            $http({
                method: "GET",
                url: 'http://api.openweathermap.org/data/2.5/weather?q='+inputValue,
				headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
            })
                .success(function(data,status){
                    factory.backData = data; 
                    deferred.resolve(factory.backData);//the Task has...