<apex:component id="sample_ng_component"
    selfClosing="true"
>
    <apex:outputPanel layout="block" id="root">

		<!-- EVENTUALLY USE TO GENERATE DEDICATED MODULE/CONTROLLER NAMES -- NO NEED FOR THAT UNTIL NOW (??) -->
		<apex:variable value="{!SUBSTITUTE($Component.root, ':', '_')}" var="rootId" />
		{!rootId}
		<div ng-controller="Controller">
		    {{greeting}}
		    <div>
		        <label for="article_number">#Article number#</label>
		        <input 
		            type="text" 
		            name="article_number" 
		            id="article_number" 
		            autocomplete="off" 
		            placeholder="Article number"
		            ng-model="articleNumber"
		        />
		        {{ articleNumber }}
		    </div>
		</div>
		
		<script>
		    (function() {
		        "use strict";
		        if(typeof angular === "undefined") {
		            var errMsg = "angular.js is required in order to run this component. Refer to <a href=\"https://docs.angularjs.org/misc/downloading\">https://docs.angularjs.org/misc/downloading</a> for further information about installing angular.js in your page.";
		            if(console) { 
		                console.error(errMsg);
		            }
		            throw errMsg;
		        } else {
		            // BOOTSTRAP ANGULAR APP
		            var app = angular
		                .module('sampleModule', [])
		                    .controller('Controller', function($scope, $timeout) {
		                        
		                        $scope.greeting = 'Welcome!';
		                        
		                        var promise = null;
		                        
		                        $scope.$watch("articleNumber", function(newValue, oldValue) {
		                            
		                            if(newValue === oldValue) {
		                                return;
		                            }
		                            
		                            if(promise) {
		                                $timeout.cancel(promise);
		                            }
		                            
		                            promise = $timeout(function() {
		                                
										// CALL DA SERVER HERE
										Visualforce.remoting.Manager.invokeAction(
											'{!$RemoteAction.blohbloh.blahblah}',
											$scope.articleNumber,
											function() { 
												// lala 
											}
										);
										
		                            },  500);
		                        });
		                    });
		            
		            angular.bootstrap(document.getElementById('{!$Component.root}'), ['sampleModule']);
		        }
		    })();
		</script>
	</apex:outputPanel>
</apex:component>