JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc7.min.js"></script>
<div ng:app="MyApp">
        <div id="ng-app" ng:controller="MyController">
            <form>
                <label>Select an option</label>
                <select ng:model="selectedOption" ng:options="o.value for o in optionsForSelect"></select> 
            </form>
        </div>
    </div>
    <p>
        Legacy code outside the controller, <a id="addOption" href="#">click here to add an option</a>.
    </p>

JavaScript

(function(window) {

    var app = angular.module('MyApp', []).factory('myService', ['$rootScope', function($rootScope) {
        var myService = {
            data: [{
                "key": "a",
                "value": "A"},
            {
                "key": "b",
                "value": "B"}],
            addOption: function(option) {
                this.data.push(option);
            }
        };
        return myService;}]);

    window.MyController = function($scope, myService) {
        $scope.optionsForSelect = myService.data;
        $scope.selectedOption = myService.data[0];
    }

})(window);

$(document).ready(function(){

    $('#addOption').click(function() {
        var injector = angular.injector(['ng', 'MyApp']);
        injector.invoke(['myService', function(myService) {
            myService.addOption({
                "key": "c",
                "value": "C"
            });
            console.log(myService.data);}]);
    });

});