AngularJS: Listando dados, adicionando dados e filtrando dados

Esse tutorial é básico mas bem direto, não serve para ensinar o AngularJS do 0, para isso basta ler a página inicial do AngularJS pois seus exemplos são bem intuitivos:
https://angularjs.org/

Para esse exemplo primeiro vou mostrar como foi estruturado o JavaScript, segue o código todo comentado a baixo.
[javascript]
// Criando o Controller
angular.module(“angularApp”, []).controller(“Lista”, function(){

// Lista de Cidades que será exbida usando a diretiva ng-repeat
this.cidades = [{nome:”Natal”, ur:”RN”},{nome:”Fortaleza”, ur:”CE”},{nome:”João Pessoa”, ur:”PB”}, {nome:”Recife”, ur:”PE”}];

// Método que adiciona elementos a lista de Cidades usando a diretiva ng-submit
this.addCidade = function(){
this.cidades.push({nome:this.nomeCidade, ur:this.urCidade});
// Limpa os campos
this.nomeCidade = ”;
this.urCidade = ”;
};

// Método que recebe alterações no campo de busca usando a diretiva ng-change
this.escrevendoBusca = function(){
console.log(“Buscando: “+this.busca);
}

});
[/javascript]

Lendo o código podemos ver que primeiro foi criado o Controller usando o angular.

Todo nosso código HTML mostrado a baixo, está dentro de uma div que chama o controller Lista:
[html]

[/html]

Listando e Filtrando

Usando a diretiva ng-repeat, podemos listar os dados da lista de cidades que está no nosso controller lista. Podemos ver que após o pipe(|) adicionamos o comando filter que serve para filtrar os dados usando o valor do input com o ng-model lista.busca:

[html]

• {{cidade.nome}}/{{cidade.ur}}

[/html]

Adicionando Valores
Criamos um form que usa a diretiva ng-submit para chamar o método lista.addCidade():
[html]

[/html]

O Código completo fica da seguinte forma:
index.html
[html]

https://ajax.googleapis.com/ajax/libs/angularjs/1.3.16/angular.min.js
http://script.js

[/html]

script.js
[javascript]
// Criando o Controller
angular.module(“angularApp”, []).controller(“Lista”, function(){

// Lista de Cidades que será exbida usando a diretiva ng-repeat
this.cidades = [{nome:”Natal”, ur:”RN”},{nome:”Fortaleza”, ur:”CE”},{nome:”João Pessoa”, ur:”PB”}, {nome:”Recife”, ur:”PE”}];

// Método que adiciona elementos a lista de Cidades usando a diretiva ng-submit
this.addCidade = function(){
this.cidades.push({nome:this.nomeCidade, ur:this.urCidade});
// Limpa os campos
this.nomeCidade = ”;
this.urCidade = ”;
};

// Método que recebe alterações no campo de busca usando a diretiva ng-change
this.escrevendoBusca = function(){
console.log(“Buscando: “+this.busca);
}

});
[/javascript]