JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.angularjs.org/1.2.23/angular.min.js"></script>
<script src="http://rawgithub.com/m-e-conroy/angular-dialog-service/v4.2.0/example/js/ui-bootstrap-tpls-0.11.0.min.js"></script>
<div ng-app="test" ng-controller="myCtrl">
    <div>
        Parent Value Changing: {{copied}}
    </div>
    <br>
    <div>
        <label class="control-label">Enter your city:</label>
        <div><my-input value="myCity"></my-input></div>
    </div>
</div>

JavaScript

angular.module('test',['ui.bootstrap'])

.controller('myCtrl',function($scope, $http, limitToFilter){
    console.log("myCtrl is invoked");
 
}) // end myCtrl

.directive('myInput',function(){
    return {
        restrict : 'E',
        replace : true,
        template : '<div><input type="text" ng-model="value" typeahead="city for city in cities($viewValue)" typeahead-on-select="onSelect($item,$model,$label)" class="form-control"></div>',
        scope : {
            value : '='
            //collection : '&',
            //valueExpr : '@'
        },
        link : {
            pre :  function(scope,el){
                /*var ta = el.attr('value-expr');
                return $compile($('input',el).attr('ng-model',scope.ngModel).attr('typeahead',ta))(scope);*/
                //$compile($('input',el));
            },
            post : function(scope,el,attrs){
                scope.changed = false;
                
                scope.onSelect = function($item,$model,$label){
                    console.log("onSelect invoked");
                    scope.changed = true;
                };
            }
        },
        controller: ["$scope", "$http", "limitToFilter", function($scope, $http, limitToFilter) {
            console.log("myInput controller is invoked");
            $scope.cities = function(cityName) {
                console.log("cities function is invoked for: " + cityName);
                return $http.jsonp("http://gd.geobytes.com/AutoCompleteCity?callback=JSON_CALLBACK &filter=US&q="+cityName).then(function(response){
                    console.log(response.data);
                    //return limitToFilter(response.data, 15);
                    return response.data;
                });
            };
        }]
                                                                                                            
    };
}); // end myInput