Dom does not reorient on model change (Elm)

Question

I am trying to create a simple Elm CRUD example, but the DOM does not redraw when I add a new element to the list of elements in the model.

Right now I'm just adding a static entry, and I can confirm that the model is being changed using the Elm debugger, but the itemView items displayed do not update the w / new div element.

I feel like maybe I missed a pretty important part of the Elm / virtual dom architecture. Can someone point me in the right direction?

import Html exposing (Html, text, beginnerProgram, div, input, button)
import Html.Events exposing (onInput, onClick)
import List exposing (map, repeat, append)

main =
    Html.beginnerProgram
        { model = model
        , view = view
        , update = update }

type alias Model =
    { items : List Item
    , inputTxt : String }

model : Model
model =
    { items = items
    , inputTxt = inputTxt }

type alias Item =
    { id : Int
    , txt : String }


item : Item
item =
    { id = 0
    , txt = "some text" }

items : List Item
items =
    repeat 2 item

inputTxt : String
inputTxt =
    ""

type Msg
    = NoOp
    | ChangeTxt String
    | AddItem


update : Msg -> Model -> Model
update msg model =
    case msg of
        NoOp ->
            model
        ChangeTxt newTxt ->
            { model | inputTxt = newTxt }
        AddItem ->
            { model | items = model.items ++ [{ id = 0, txt = "some text" }] }

view : Model -> Html Msg
view model =
    div [] [
        div [] [ itemsView items ]
        , div [] [
            input [ onInput ChangeTxt ] []
        ]
        , div [] [
            text model.inputTxt
        ]
        , div [] [
            button [ onClick AddItem ] [ text "click me!" ]
        ]
    ]

itemView : Item -> Html Msg
itemView item =
    div [] [
        div [] [ text ( toString item.id ) ]
        , div [] [ text item.txt ]
    ]

itemsView : List Item -> Html Msg
itemsView items =
    div [] [
        div [] (List.map itemView items)
    ]

Answer 1

The second line of your function viewshould be

div [] [ itemsView model.items ]

Now it always displays the ones itemsdefined above, not the elements in the model.