krawaller/myapp.js

## myapp.js
angular.module('myApp',[])

	.factory('tags',function(){
		var tags = ['urgent','blocked','boring','hard'],
			callbacks = [];
		return {
			addTag: function(t){
				tags.push(t);
				callbacks.forEach(function(cb){
					cb(tags)
				});
			},
			registerInterest: function(cb){
				callbacks.push(cb);
				cb(tags);
			}
		}
	})


	.controller('tagsController',function($scope,tags){
		$scope.createNewTag = function(){
			tags.addTag($scope.newTag)
			$scope.newTag = ""
		}

		var mylocalcallback = function(taglist){
			$scope.taglist = taglist;
		}

		tags.registerInterest(mylocalcallback);
	})


	.controller('issueController',function($scope,tags){
		$scope.issues = [{description:"dishes",id:1,tags:{}},{description:"garbage",id:2,tags:{}}];
		$scope.addNewIssue = function(){
			$scope.issues.push({description:$scope.newIssue,id:$scope.issues.length+1,tags:{}});
			$scope.newIssue = undefined;
		}
		tags.registerInterest(function(tags){
			$scope.availableTags = tags;
		});
		$scope.tagToAdd = $scope.availableTags[0]
		$scope.addTagToSelectedIssues = function(){
			$scope.issues.forEach(function(i){
				if (i.selected){
					i.tags[$scope.tagToAdd] = 1;
				}
			});
		}
		$scope.removeTagFromIssue = function(i,tname){
			delete i.tags[tname];
		}
	});

## weird.html
<!DOCTYPE html>
<html>
<head>
  <script src="../angular.js"></script>
  <script src="../jquery.js"></script>
  <script src="../bootstrap.js"></script>
  <link rel="stylesheet" href="../bootstrap.css"></link>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>TEST</title>
</head>
<style>
.done {
  text-decoration: line-through;
}
</style>
<body>

<div ng-app="myApp" class="container">

  <h4>Tags</h4>

  <div ng-controller="tagsController">
    <div>
      <span ng-repeat="t in taglist" class="label label-success">{{t}}</span>
    </div>
    <input ng-model="newTag" />
    <button ng-click="createNewTag()">Create new tag</button>
  </div>

  <hr/>

  <div ng-controller="issueController">

    <h4>Issues</h4>

    <div ng-repeat="issue in issues">
      <div>
        <input type="checkbox" ng-model="issue.selected">
        <span ng-click="issue.done = !issue.done" ng-class="{done:issue.done}">
          {{issue.description}}
        </span>
        <span ng-repeat="(tagname,set) in issue.tags">
          <span class="label label-success" ng-click="removeTagFromIssue(issue,tagname)">{{tagname}}</span>
        </span>
      </div>
    </div>

    <div>
      <select ng-model="tagToAdd" ng-options="t for t in availableTags"></select>
      <button ng-click="addTagToSelectedIssues()">Add {{tagToAdd}} to selected issues</button>
    </div>

    <div>
      <input ng-model="newIssue"/> <button ng-click="addNewIssue()">Add new issue</button>
    </div>

    <hr/>

    <pre ng-bind="issues | json"></pre>

  </div>

  <script src="./myapp.js"></script>
</body>
</html>
	angular.module('myApp',[])

	.factory('tags',function(){
	var tags = ['urgent','blocked','boring','hard'],
	callbacks = [];
	return {
	addTag: function(t){
	tags.push(t);
	callbacks.forEach(function(cb){
	cb(tags)
	});
	},
	registerInterest: function(cb){
	callbacks.push(cb);
	cb(tags);
	}
	}
	})


	.controller('tagsController',function($scope,tags){
	$scope.createNewTag = function(){
	tags.addTag($scope.newTag)
	$scope.newTag = ""
	}

	var mylocalcallback = function(taglist){
	$scope.taglist = taglist;
	}

	tags.registerInterest(mylocalcallback);
	})



	.controller('issueController',function($scope,tags){
	$scope.issues = [{description:"dishes",id:1,tags:{}},{description:"garbage",id:2,tags:{}}];
	$scope.addNewIssue = function(){
	$scope.issues.push({description:$scope.newIssue,id:$scope.issues.length+1,tags:{}});
	$scope.newIssue = undefined;
	}
	tags.registerInterest(function(tags){
	$scope.availableTags = tags;
	});
	$scope.tagToAdd = $scope.availableTags[0]
	$scope.addTagToSelectedIssues = function(){
	$scope.issues.forEach(function(i){
	if (i.selected){
	i.tags[$scope.tagToAdd] = 1;
	}
	});
	}
	$scope.removeTagFromIssue = function(i,tname){
	delete i.tags[tname];
	}
	});
	<!DOCTYPE html>
	<html>
	<head>
	<script src="../angular.js"></script>
	<script src="../jquery.js"></script>
	<script src="../bootstrap.js"></script>
	<link rel="stylesheet" href="../bootstrap.css"></link>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>TEST</title>
	</head>
	<style>
	.done {
	text-decoration: line-through;
	}
	</style>
	<body>

	<div ng-app="myApp" class="container">

	<h4>Tags</h4>

	<div ng-controller="tagsController">
	<div>
	<span ng-repeat="t in taglist" class="label label-success">{{t}}</span>
	</div>
	<input ng-model="newTag" />
	<button ng-click="createNewTag()">Create new tag</button>
	</div>

	<hr/>

	<div ng-controller="issueController">

	<h4>Issues</h4>

	<div ng-repeat="issue in issues">
	<div>
	<input type="checkbox" ng-model="issue.selected">
	<span ng-click="issue.done = !issue.done" ng-class="{done:issue.done}">
	{{issue.description}}
	</span>
	<span ng-repeat="(tagname,set) in issue.tags">
	<span class="label label-success" ng-click="removeTagFromIssue(issue,tagname)">{{tagname}}</span>
	</span>
	</div>
	</div>

	<div>
	<select ng-model="tagToAdd" ng-options="t for t in availableTags"></select>
	<button ng-click="addTagToSelectedIssues()">Add {{tagToAdd}} to selected issues</button>
	</div>

	<div>
	<input ng-model="newIssue"/> <button ng-click="addNewIssue()">Add new issue</button>
	</div>

	<hr/>

	<pre ng-bind="issues \| json"></pre>

	</div>

	<script src="./myapp.js"></script>
	</body>
	</html>