LuizPanariello/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js">
</script>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="app">
  <div ng-controller="List">
  <div dt-editable-list="list"></div>
  </div>
<script id="jsbin-javascript">
var app = angular.module('app', []);

app.directive('dtEditableList', ['$timeout',
        function($timeout) {
            return {
                scope:{
                    dtEditableList: '=',
                },
                restrict: 'EA',
                replace: true,
                template: '<div class="dt-editable-list"><ul><li ng-repeat="input in inputList"><p ng-hide="input.editMode">{{input.Name}}</p><input ng-show="input.editMode" type="text" ng-model="input.Name"><i class="fa fa-pencil-square-o" ng-click="toggleEdit(input)"></i><i class="fa fa-trash" ng-click="remove($index)"></i></li><li><input ng-model="newInput" /><i class="fa fa-pencil" ng-click="add(newInput)"></i></li></ul></div>',
                controller: ['$scope', function($scope) {
                  $scope.inputList = $scope.dtEditableList;
                  $scope.remove = function(index){
                    $scope.inputList.splice(index, 1);
                  };

                  $scope.toggleEdit = function(input){
                    input.editMode = !input.editMode;
                  };

                  $scope.add = function(inputName){
                    if(inputName === "" || typeof inputName === 'undefined' ) return;

                     var add = {Name: inputName};
                     $scope.inputList.push(add);
                      $scope.newInput = "";
                  };
                }]
            };
        }
    ]);


app.controller('List', function($scope){
   $scope.list = [{
     Name: 'Ae',
     id:'0000000-000-0000-00000',
   }];
});
</script>

<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js">
<\/script>
  <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-app="app">
  <div ng-controller="List">
  <div dt-editable-list="list"></div>
  </div>
</body>
</html></script>


<script id="jsbin-source-javascript" type="text/javascript">var app = angular.module('app', []);

app.directive('dtEditableList', ['$timeout',
        function($timeout) {
            return {
                scope:{
                    dtEditableList: '=',
                },
                restrict: 'EA',
                replace: true,
                template: '<div class="dt-editable-list"><ul><li ng-repeat="input in inputList"><p ng-hide="input.editMode">{{input.Name}}</p><input ng-show="input.editMode" type="text" ng-model="input.Name"><i class="fa fa-pencil-square-o" ng-click="toggleEdit(input)"></i><i class="fa fa-trash" ng-click="remove($index)"></i></li><li><input ng-model="newInput" /><i class="fa fa-pencil" ng-click="add(newInput)"></i></li></ul></div>',
                controller: ['$scope', function($scope) {
                  $scope.inputList = $scope.dtEditableList;
                  $scope.remove = function(index){
                    $scope.inputList.splice(index, 1);
                  };

                  $scope.toggleEdit = function(input){
                    input.editMode = !input.editMode;
                  };

                  $scope.add = function(inputName){
                    if(inputName === "" || typeof inputName === 'undefined' ) return;

                     var add = {Name: inputName};
                     $scope.inputList.push(add);
                      $scope.newInput = "";
                  };
                }]
            };
        }
    ]);


app.controller('List', function($scope){
   $scope.list = [{
     Name: 'Ae',
     id:'0000000-000-0000-00000',
   }];
});</script></body>
</html>

## jsbin.federakapu.js
var app = angular.module('app', []);

app.directive('dtEditableList', ['$timeout',
        function($timeout) {
            return {
                scope:{
                    dtEditableList: '=',
                },
                restrict: 'EA',
                replace: true,
                template: '<div class="dt-editable-list"><ul><li ng-repeat="input in inputList"><p ng-hide="input.editMode">{{input.Name}}</p><input ng-show="input.editMode" type="text" ng-model="input.Name"><i class="fa fa-pencil-square-o" ng-click="toggleEdit(input)"></i><i class="fa fa-trash" ng-click="remove($index)"></i></li><li><input ng-model="newInput" /><i class="fa fa-pencil" ng-click="add(newInput)"></i></li></ul></div>',
                controller: ['$scope', function($scope) {
                  $scope.inputList = $scope.dtEditableList;
                  $scope.remove = function(index){
                    $scope.inputList.splice(index, 1);
                  };

                  $scope.toggleEdit = function(input){
                    input.editMode = !input.editMode;
                  };

                  $scope.add = function(inputName){
                    if(inputName === "" || typeof inputName === 'undefined' ) return;

                     var add = {Name: inputName};
                     $scope.inputList.push(add);
                      $scope.newInput = "";
                  };
                }]
            };
        }
    ]);


app.controller('List', function($scope){
   $scope.list = [{
     Name: 'Ae',
     id:'0000000-000-0000-00000',
   }];
});
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js">
	</script>
	<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body ng-app="app">
	<div ng-controller="List">
	<div dt-editable-list="list"></div>
	</div>
	<script id="jsbin-javascript">
	var app = angular.module('app', []);

	app.directive('dtEditableList', ['$timeout',
	function($timeout) {
	return {
	scope:{
	dtEditableList: '=',
	},
	restrict: 'EA',
	replace: true,
	template: '<div class="dt-editable-list"><ul><li ng-repeat="input in inputList"><p ng-hide="input.editMode">{{input.Name}}</p><input ng-show="input.editMode" type="text" ng-model="input.Name"><i class="fa fa-pencil-square-o" ng-click="toggleEdit(input)"></i><i class="fa fa-trash" ng-click="remove($index)"></i></li><li><input ng-model="newInput" /><i class="fa fa-pencil" ng-click="add(newInput)"></i></li></ul></div>',
	controller: ['$scope', function($scope) {
	$scope.inputList = $scope.dtEditableList;
	$scope.remove = function(index){
	$scope.inputList.splice(index, 1);
	};

	$scope.toggleEdit = function(input){
	input.editMode = !input.editMode;
	};

	$scope.add = function(inputName){
	if(inputName === "" \|\| typeof inputName === 'undefined' ) return;

	var add = {Name: inputName};
	$scope.inputList.push(add);
	$scope.newInput = "";
	};
	}]
	};
	}
	]);




	app.controller('List', function($scope){
	$scope.list = [{
	Name: 'Ae',
	id:'0000000-000-0000-00000',
	}];
	});
	</script>

	<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
	<html>
	<head>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js">
	<\/script>
	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body ng-app="app">
	<div ng-controller="List">
	<div dt-editable-list="list"></div>
	</div>
	</body>
	</html></script>


	<script id="jsbin-source-javascript" type="text/javascript">var app = angular.module('app', []);

	app.directive('dtEditableList', ['$timeout',
	function($timeout) {
	return {
	scope:{
	dtEditableList: '=',
	},
	restrict: 'EA',
	replace: true,
	template: '<div class="dt-editable-list"><ul><li ng-repeat="input in inputList"><p ng-hide="input.editMode">{{input.Name}}</p><input ng-show="input.editMode" type="text" ng-model="input.Name"><i class="fa fa-pencil-square-o" ng-click="toggleEdit(input)"></i><i class="fa fa-trash" ng-click="remove($index)"></i></li><li><input ng-model="newInput" /><i class="fa fa-pencil" ng-click="add(newInput)"></i></li></ul></div>',
	controller: ['$scope', function($scope) {
	$scope.inputList = $scope.dtEditableList;
	$scope.remove = function(index){
	$scope.inputList.splice(index, 1);
	};

	$scope.toggleEdit = function(input){
	input.editMode = !input.editMode;
	};

	$scope.add = function(inputName){
	if(inputName === "" \|\| typeof inputName === 'undefined' ) return;

	var add = {Name: inputName};
	$scope.inputList.push(add);
	$scope.newInput = "";
	};
	}]
	};
	}
	]);




	app.controller('List', function($scope){
	$scope.list = [{
	Name: 'Ae',
	id:'0000000-000-0000-00000',
	}];
	});</script></body>
	</html>